最近在摸索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();
}
});
});
以上便为实现的具体方式的展现了。