用Javascript中的按钮进行函数调用

Question

I have a problem with my implementation of a button meant to add functionality to a piece of code. 我在按钮上的实现存在问题，该按钮旨在向一段代码添加功能。 It seems to be working, but why do the Date and Checkbox elements not behave like the ones in the first row? 它似乎正在工作，但是为什么Date和Checkbox元素的行为不像第一行中的那样？

It should calculate the difference in the date and cross the other <td> . 它应该计算日期差并与其他<td> 。 I need to call the Date and Checkbox properties with my add button. 我需要使用“添加”按钮调用“ Date和“ Checkbox属性。

My code is below. 我的代码如下。 How can I fix it? 我该如何解决？ Thank you for your time. 感谢您的时间。

<!DOCTYPE html>
<html>
<head>
<title></title>

<style>
    table {
        border-collapse: collapse;
        margin: 100px;
    }

    table,
    td,
    th {
        border: 1px solid black;
        padding: 10px;
    }

        table td.crossed {
            background-image: -webkit-linear-gradient(top left, transparent, red, transparent);
            background-image: -moz-linear-gradient(top left, transparent, red, transparent);
            background-image: -o-linear-gradient(top left, transparent, red, transparent);
            background-image: linear-gradient(to bottom right, transparent, red, transparent);
        }
</style>
</head>
<body>
<table id="t1">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>
            <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" />
        </th>
    </tr>

    <tr>
        <td>1.</td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="date" id="mydate">
        </td>
        <td contenteditable='true'></td>
        <td>
            <input type="button" value="Delete Row" onclick="deleteRow(this)" />
        </td>
    </tr>
</table>
<script>
    function createRowColumn(row) {
        var column = document.createElement("td");
        row.appendChild(column);
        return column;
    }


    function addRow() {
        var newrow = document.createElement("tr");
        var numericColumn = createRowColumn(newrow);
        var checkColumn = createRowColumn(newrow);
        var dateColumn = createRowColumn(newrow);
        var emptyColumn = createRowColumn(newrow);
        var removeColumn = createRowColumn(newrow);

        var checkbox = document.createElement("input");
        checkbox.setAttribute("type", "checkbox");
        checkColumn.appendChild(checkbox);

        var datebox = document.createElement("input");
        datebox.setAttribute("type", "date");

        dateColumn.appendChild(datebox);

        emptyColumn.setAttribute("contenteditable", "true");

        var remove = document.createElement("input");
        remove.setAttribute("type", "button");
        remove.setAttribute("value", "Delete Row");
        remove.setAttribute("onClick", "deleteRow(this)");
        removeColumn.appendChild(remove);

        var table = document.getElementById('t1');
        var tbody = table.querySelector('tbody') || table;
        var count = tbody.getElementsByTagName('tr').length;
        numericColumn.innerText = count.toLocaleString() + '.';

        tbody.appendChild(newrow);
    }

    function deleteRow(button) {
        var row = button.parentNode.parentNode;
        var tbody = row.parentNode;
        tbody.removeChild(row);


        var rows = tbody.getElementsByTagName("tr");
        for (var i = 1; i < rows.length; i++) {
            var currentRow = rows[i];
            currentRow.childNodes[0].innerText = i.toLocaleString() + '.';
        }

    }
    var cb = document.querySelectorAll('input[type="checkbox"]')[0];
    var td = document.querySelectorAll("td[contenteditable]")[0];

    cb.addEventListener("click", function () {
        if (cb.checked) td.classList.add("crossed");
        else td.classList.remove("crossed");
    });

    window.onload = function () {
        document.getElementById('mydate').onchange = function () {
            var selectedDateFromCalendar = new Date(this.value);

            var currentdate = new Date();

            var Diff = new Date(selectedDateFromCalendar) - currentdate;

            var diffDays = Math.ceil(Diff / (1000 * 3600 * 24));

            if ((selectedDateFromCalendar) - currentdate < 0) {
                alert("out of date");
            }
            else if ((selectedDateFromCalendar) - currentdate >= 1) {
                alert("last " + diffDays + " day");
            }
        }
    }
</script>
</body>
</html>

Answer 1

Because you take element by id! 因为您通过id来获取元素！ getElementById and id's are unique!! getElementById和id是唯一的！ Your jQuery is stuck on the first id.. it can't recognise the other. 您的jQuery卡在第一个ID上。无法识别其他ID。 Try using multiple id's or classes!! 尝试使用多个ID或类！

Big edit here: 在此处进行大修改：

Well, sorry for the time but I had some work and no time for Stack. 好吧，很抱歉，但是我有一些工作，没有时间去做Stack。 Your problem is a bit tricky if you don't want to "loop and mess with the multiple classes" you can get some reference about that here 如果您不想“循环并弄乱多个类”，那么您的问题就比较棘手，您可以在此处获得一些参考

So using the above QA, here is following snippet for the tricky solution, where we have to "add and fire" events in each new dynamically created element. 因此，使用上面的质量检查，下面是棘手的解决方案的代码段，在该代码段中，我们必须在每个动态创建的新元素中“添加并触发”事件。

Check that I added 'myclass' not only in the first row but and on the following dynamically created ones! 检查我不仅在第一行中添加了“ myclass”，还在随后动态创建的内容中添加了“ myclass”！

 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src='jquery-2.1.1.min.js'></script> <style> table { border-collapse: collapse; margin: 100px; } table, td, th { border: 1px solid black; padding: 10px; } table td.crossed { background-image: -webkit-linear-gradient(top left, transparent, red, transparent); background-image: -moz-linear-gradient(top left, transparent, red, transparent); background-image: -o-linear-gradient(top left, transparent, red, transparent); background-image: linear-gradient(to bottom right, transparent, red, transparent); } </style> </head> <body> <table id="t1"> <tr> <th></th> <th></th> <th></th> <th></th> <th> <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" /> </th> </tr> <tr> <td>1.</td> <td> <input type="checkbox" /> </td> <td> <input type="date" id="mydate" class="myclass"> </td> <td contenteditable='true'></td> <td> <input type="button" value="Delete Row" onclick="deleteRow(this)" /> </td> </tr> </table> <script> function createRowColumn(row) { var column = document.createElement("td"); row.appendChild(column); return column; } function addRow() { var newrow = document.createElement("tr"); var numericColumn = createRowColumn(newrow); var checkColumn = createRowColumn(newrow); var dateColumn = createRowColumn(newrow); var emptyColumn = createRowColumn(newrow); var removeColumn = createRowColumn(newrow); var checkbox = document.createElement("input"); checkbox.setAttribute("type", "checkbox"); checkColumn.appendChild(checkbox); var datebox = document.createElement("input"); datebox.setAttribute("type", "date"); datebox.setAttribute("class", "myclass"); dateColumn.appendChild(datebox); emptyColumn.setAttribute("contenteditable", "true"); var remove = document.createElement("input"); remove.setAttribute("type", "button"); remove.setAttribute("value", "Delete Row"); remove.setAttribute("onClick", "deleteRow(this)"); removeColumn.appendChild(remove); var table = document.getElementById('t1'); var tbody = table.querySelector('tbody') || table; var count = tbody.getElementsByTagName('tr').length; numericColumn.innerText = count.toLocaleString() + '.'; tbody.appendChild(newrow); } function deleteRow(button) { var row = button.parentNode.parentNode; var tbody = row.parentNode; tbody.removeChild(row); var rows = tbody.getElementsByTagName("tr"); for (var i = 1; i < rows.length; i++) { var currentRow = rows[i]; currentRow.childNodes[0].innerText = i.toLocaleString() + '.'; } } var cb = document.querySelectorAll('input[type="checkbox"]')[0]; var td = document.querySelectorAll("td[contenteditable]")[0]; cb.addEventListener("click", function () { if (cb.checked) td.classList.add("crossed"); else td.classList.remove("crossed"); }); function hasClass(elem, className) { return elem.className.split(' ').indexOf(className) > -1; } document.addEventListener('change', function (e) { if (hasClass(e.target, 'myclass')) { var selectedDateFromCalendar = new Date(e.target.value); var currentdate = new Date(); var Diff = new Date(selectedDateFromCalendar) - currentdate; var diffDays = Math.ceil(Diff / (1000 * 3600 * 24)); if ((selectedDateFromCalendar) - currentdate < 0) { alert("out of date"); } else if ((selectedDateFromCalendar) - currentdate >= 1) { alert("last " + diffDays + " day"); } } }, false); </script> </body> </html>

with help from ram swaroop , Dave and Sime Vidas 在ram swaroop ，Dave和Sime Vidas的帮助下

have a nice day! 祝你今天愉快！

用Javascript中的按钮进行函数调用

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-12-22 19:56:44

用Javascript中的按钮进行函数调用

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-12-22 19:56:44

解决方案1
2 已采纳 2015-12-22 19:56:44