当前位置:Gxlcms > JavaScript > jquery如何操作table表格各种方式实例汇总

jquery如何操作table表格各种方式实例汇总

时间:2021-07-01 10:21:17 帮助过:10人阅读

本文汇总了jQuery操作Table的技巧。分享给大家供大家参考,具体如下:

1.鼠标移动行变色

方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能


方法二:


2.奇偶行不同颜色


3.隐藏一行

$("#table1 tbody tr:eq(3)").hide();

4.隐藏一列

方法一:

$("#table1 tr td::nth-child(3)").hide();

方法二:

$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

5.删除一行


6.删除一列


7.得到(设置)某个单元格的值


8.插入一行:


9、获取每一行指定的单元格的值


10、全选或全不选


11、客户端动态添加行、删除行



<style type="text/css">
.hover
{
  background-color:red;
}
</style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="checkall" onclick="checkAll1(this)"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>地址</th>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
</td>
<td>张三</td>
<td>男</td>
<td>zhangsan</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
</td>
<td>李四</td>
<td>男</td>
<td>lisi</td>
<td>安庆</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
</td>
<td>王五</td>
<td>男</td>
<td>beijing</td>
<td>北京</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
</td>
<td>无名氏</td>
<td>女</td>
<td>wumingshi</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
</td>
<td>赵老师</td>
<td>男</td>
<td>zhaolaoshi</td>
<td>浙江</td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" />
<input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" />
<input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" />
</td>
</tr>
</table>

以上就是jquery如何操作table表格各种方式实例汇总的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行