<分区>
标签 javascript jquery html css
<分区>
我有一个表格，用户可以在其中选择一行。我制作了一些 CSS 来突出显示选定的行。用户可以向原始表中添加行。问题是添加的行在选择时没有突出显示。
HTML 部分:
<table class="table_to_fill" id="table_id">
<thead>
<tr>
<th> title 1 </th>
<th> title 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>old row 1</td>
<td>old row 1</td>
</tr>
<tr>
<td>old row 2</td>
<td>old row 1</td>
</tr>
</tbody>
</table>
CSS:
.table_to_fill tr:hover, .table_to_fill tr.selected {
background-color: #1E90FF;
color : #fff;
font-weight : bold;}
Javascript:
$(".table_to_fill tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
//to add rows
$("#add_row_button").click(function(){
$('#table_id tr:last').after('<tr><td>new row</td><td>new row</td></tr>');
});
那么我做错了什么？感谢您的帮助。
最佳答案
使用delegated event因为行是在 DOM 就绪后添加到 DOM 的，所以事件不会在新添加的行上触发:
$(".table_to_fill").on('click','tr',function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
jquery事件委托(delegate)可以从here中理解
关于javascript - CSS 不适用于 jquery 表上新添加的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25103936/