关于jquery简单操作简单表格

最近在摸索jquery中，想着学习过程中还是记下点自己的东西比较好，不管是日后自己查阅，亦或是对于他人有些许帮助。

也是一件两全其美的事情了。

下面我就简单 贴上自己的html中重要部分了。

具体实现了的内容有：

1. 光标附上 表格隔行变色效果

2. 点击全选按钮 ，选中所有未选中项；或者全选时，取消全选

3. 选中项删除行操作

jquery版本： jquery-3.1.1

一，页面样式表与布局

<div class="tab-ope">
<table>
<caption>数据管理</caption>
<tr>
<th>选项</th>
<th>编号</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1001</label>
</td>
<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>

</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1002</label>
</td>
<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>

</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1003</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1004</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1005</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1006</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1007</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1008</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<label>1009</label>
</td>

<td>
<label>张三</label>
</td>
<td>
<label>男</label>
</td>
<td>
<label>￥55.23</label>
</td>
</tr>

</table>
</div>
<div class="control">
<button id="selectAll">全选</button>
<button id="delete">删除</button>
</div>

　　二，jquery 代码实现部分

//光标附上，奇数行变色；
$("table tr:odd").hover(function () {
$(this).toggleClass("row-odd");
});
//光标附上，偶数行变色；
$("table  tr:even").hover(function () {
$(this).toggleClass("row-even");
})
//全选按钮事件
$("#selectAll").click(function () {
//若未全选中，则点击全选按钮，所有checkbox 选中
if ($("input[type=checkbox]:checked").length == $(":checkbox").length) {
//全选中状态，反选
$(":checkbox").removeAttr("checked");
} else {
//未全选中状态，全选操作
$(":checkbox").attr("checked", "checked");
}
});

//删除选中行。
$("#delete").click(function () {

//遍历 所有checkbox ，使用each遍历
$(":checkbox").each(function () {
if ($(this).is(":checked")) {
//获取选中行的下标索引，以便 删除操作
var index = $(this).parent("td").parent("tr").index();
$("tr")[index].remove();
}
});
});

以上便为实现的具体方式的展现了。