您的位置:首页 > 其它

点击tr选中每一行前面的checkbox

2016-09-10 19:02 239 查看
<style type="text/css">
.blue {
background: #006CB7;
}

.pox {
background: #255625;
}
</style>
<table class="table" id="itemList">
<thead>
<tr>

<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>

<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<tr>

<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>

<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

<table class="table table-bordered" id="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td><label>

  <input type="checkbox" id="inlineCheckbox1" value="option1"> 

</label></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<tr>
<td><label>

  <input type="checkbox" id="inlineCheckbox1" value="option1"> 

</label></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>

<td><label>

  <input type="checkbox" id="inlineCheckbox1" value="option1"> 

</label></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//隔行变色
$("#itemList tr").each(function(i) {
this.style.color = ['red', '#faf'][i % 2];
})
$(function() {
//点击一行加色选中checkbox
$("#table tr").click(function() {
var hasSelected = $(this).hasClass("blue");
$(this)[hasSelected ? "removeClass" : "addClass"]("blue").find(":checkbox").prop("checked", !hasSelected);

})

});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: