我有一个带有截止日期的基本任务列表。用于显示逾期日期的 CSS 脚本有效。如果我通过 from 输入添加新条目，则 css 不会应用于过期元素。我在这里研究了事件委托(delegate)，并调整了代码以包含 .on 进行委托(delegate)。花了很长时间试图解决这个问题，但任何帮助将不胜感激。
<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>
最佳答案
我做了一个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');
}
});
}
});
关于javascript - CSS 未应用于插入的表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46800676/