Question

我有一个基本的任务列表和截止日期。用于显示逾期日期的CSS脚本有效。如果我通过from输入添加新条目，则css不会应用于过期项目。我已经在这里研究了事件委托，并调整了代码以包含.on代表团。花了很长时间试图解决这个问题，但任何帮助将不胜感激。

<head>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".add-row").on('click', function() {
            var task = $("#task").val();
            var date = $("#date").val();
            var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>";
            $('table tbody').append(markup);
        });
    });
    </script>
    <script>
    $(function() {
        $('table td').each(function() {
            var row_date =
                Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/,
                    '$2/$1/$3'));
            var now_date = new Date().getTime();
            if (row_date < now_date) {
                $(this).parent('tr').addClass('past');
            }
        });
    });
    </script>
</head>
<body>
    <form>
        <input type="text" id="task" placeholder="task" />
        <input type="text" id="date" placeholder="dd/mm/yyyy" />
        <input type="button" class="add-row" value="Add Row" />
    </form>
    <table id="task_table">
        <thead>
            <tr>
                <th>Task</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Mow lawn</td>
                <td>01/02/2017</td>
            </tr>
            <tr>
                <td>Clean car</td>
                <td>01/02/2017</td>
            </tr>
            <tr>
                <td>Empty bins</td>
                <td>01/02/2018</td>
            </tr>
        </tbody>
    </table>
    <style>
    #task_table tr.past {
        background: #ff8a33;
    }
    </style>
</body>
</html>

Answer 1

尝试将CSS应用于该行中的单元格，而不是行本身：

#task_table tr.past td {
  background: #FF8A33;
}

Answer 2

我做了一个让你在那里部分的jsfiddle。加载时仍然存在问题，但这应该可以帮助您：

  $(document).ready(function(){
    $(".add-row").on('click',function(){
        var task = $("#task").val();
        var date = $("#date").val();
        var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>";
        $('table tbody').append(markup);
                checkDate();
    });

        function checkDate() {
            $('table td').each(function() {
                var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
                var now_date = new Date().getTime();

                if(row_date < now_date) {
                        $(this).closest('tr').addClass('past');
                }
         });
    }
});

jsfiddle

CSS未应用于插入的表格数据

2 个答案: