Question

我的按钮实现有问题，意味着为一段代码添加功能。它似乎有效，但为什么 Date 和 Checkbox 元素的行为与第一行中的不一样？

它应计算日期的差异并与其他<td>交叉。我需要使用添加按钮调用Date和Checkbox属性。

我的代码如下。我该如何解决？谢谢你的时间。

<!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

因为你用id取元素！ getElementById和id是独一无二的!!你的jQuery被卡在第一个id上......它无法识别另一个。尝试使用多个ID或类!!

大编辑：

好吧，对不起，但我有一些工作，没有时间为Stack。如果你不想循环和搞乱多个班级，你的问题就有点棘手了。你可以参考一下here

因此，使用上面的QA，这里是关于棘手的解决方案的片段，我们必须＆＃34;添加和解雇＆＃34;每个新动态创建的元素中的事件。

检查我是否添加了＃myclass＆＃39;不仅在第一行，而且在以下动态创建的那一行！

＆＃13;

<!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>

＆＃13;

在ram swaroop，Dave和Sime Vidas的帮助下

度过愉快的一天！

在Javascript中使用按钮进行函数调用

1 个答案: