Javascript CSS未应用于插入的表数据_Javascript_Jquery_Css_Css Selectors

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

javascript jquery css

Javascript CSS未应用于插入的表数据,javascript,jquery,css,css-selectors,Javascript,Jquery,Css,Css Selectors,我有一个基本的任务清单和截止日期。用于显示过期日期的CSS脚本可以正常工作。如果我通过from输入添加新条目，css不会应用于过期项目。我已经在这里研究了事件委派，并调整了代码以包括.on作为委派。花了很长时间试图解决这个问题，但任何帮助都将不胜感激 <head> <script type="text/javascript"> $(document).ready(function() { $(".add-row").on('click',

我有一个基本的任务清单和截止日期。用于显示过期日期的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>


$（文档）.ready（函数（）{
$（“.add row”）。在（'click'，function（）上{
var task=$（“#task”）.val（）；
变量日期=$（“#日期”）.val（）；
var markup=”“+任务+“”+日期+“”；
$（'table tbody'）。追加（标记）；
});
});
$（函数（）{
$（'table td'）。每个（函数（）{
var行日期=
Date.parse（$（this.text（）.replace（/（\d{2}）\/（\d{2}）\/（\d{4}）/，
'$2/$1/$3'));
var now_date=new date（）.getTime（）；
如果（行日期<现在日期）{
$（this.parent（'tr'）.addClass（'pass'）；
}
});
});
任务
日期
割草
01/02/2017
清洁汽车
01/02/2017
空箱子
01/02/2018
#任务表tr.past{
背景#ff8a33；
}

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

#任务#表tr.pass td{
背景#FF8A33；
}

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

#任务#表tr.pass td{
背景#FF8A33；
}

我做了一个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');
                }
         });
    }
});

$（文档）.ready（函数（）{
$（“.add row”）。在（'click'，function（）上{
var task=$（“#task”）.val（）；
变量日期=$（“#日期”）.val（）；
var markup=”“+任务+“”+日期+“”；
$（'table tbody'）。追加（标记）；
checkDate（）；
});
函数checkDate（）{
$（'table td'）。每个（函数（）{
var row_date=date.parse（$（this）.text（）.replace（/（\d{2}）\/（\d{2}）\/（\d{4}）/，“$2/$1/$3”）；
var now_date=new date（）.getTime（）；
如果（行日期<现在日期）{
$（this）.closest（'tr'）.addClass（'pass'）；
}
});
}
});

我做了一个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');
                }
         });
    }
});

$（文档）.ready（函数（）{
$（“.add row”）。在（'click'，function（）上{
var task=$（“#task”）.val（）；
变量日期=$（“#日期”）.val（）；
var markup=”“+任务+“”+日期+“”；
$（'table tbody'）。追加（标记）；
checkDate（）；
});
函数checkDate（）{
$（'table td'）。每个（函数（）{
var row_date=date.parse（$（this）.text（）.replace（/（\d{2}）\/（\d{2}）\/（\d{4}）/，“$2/$1/$3”）；
var now_date=new date（）.getTime（）；
如果（行日期<现在日期）{
$（this）.closest（'tr'）.addClass（'pass'）；
}
});
}
});

如果需要帮助，您必须向我们显示CSS。只需移动日期比较逻辑，在用户输入时将日期添加到表中。如果需要帮助，您必须向我们显示CSS。只需移动日期比较逻辑，在用户输入时将日期添加到表中。非常好，我可以看到命名函数checkDate以及使用.closest代替.parent的更改。这非常有帮助。非常好，我可以看到函数checkDate的命名以及使用.closest代替.parent的变化。这非常有帮助。