首页 > 代码库 > 关于jquery简单操作简单表格
关于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();
}
});
});
以上便为实现的具体方式的展现了。
关于jquery简单操作简单表格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。