Summary of various examples of how jquery operates tables-JS Tutorial-php.cn

Summary of various examples of how jquery operates tables

伊谢尔伦

Release： 2017-07-22 09:42:01

Original

1522 people have browsed it

This article summarizes the techniques for operating Table with jQuery. Share it with everyone for your reference, the details are as follows:

1. The row changes color when the mouse moves

Method 1: hover(fun(), fun in jQuery ()) method, parameter one: the first method is to add the style function, parameter two: the second method is to cancel the style function

$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})

Copy after login

Method two:

$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});

Copy after login

2. Different colors for odd and even rows

$("#table1 tbody tr:odd").css("background-color", "#bbf");
$("#table1 tbody tr:even").css("background-color","#ffc");
$("#table1 tbody tr:odd").addClass("odd")
$("#table1 tbody tr:even").addClass("even")

Copy after login

3.Hide one row

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

Copy after login

4. Hide a column

Method one:

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

Copy after login

Method two:

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

Copy after login

5 .Delete a row

//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();

Copy after login

6.Delete a column

//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();

Copy after login

7. Get (set) the value of a certain cell

//设置table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html("value");
//获取table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html();

Copy after login

8. Insert a row:

//在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));

Copy after login

9. Get the value of the specified cell in each row

var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(&#39;,&#39;);

Copy after login

10. Select all or Uncheck all

//方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
function checkAll(evt)
{
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++)
 {
 var tr=$(trlist[i]);
 var input=tr.find("INPUT[type=&#39;checkbox&#39;]");
 input.attr("checked",chall.checked);
 }
}
//方法二：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type=&#39;checkbox&#39;]");
input.attr("checked",evt.checked);
}
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type=&#39;checkbox&#39;]").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type=&#39;checkbox&#39;]").attr("checked",evt.checked);
}

Copy after login

11. The client dynamically adds and deletes rows

function btnAddRow()
{
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type=&#39;checkbox&#39; id=&#39;chk_"+rownum+"&#39; name=&#39;chk_"+rownum+"&#39;/>";
var text="<input type=&#39;text&#39; id=&#39;txt_"+rownum+"&#39; name=&#39;txt_"+rownum+"&#39; width=&#39;75px&#39;/>";
var sel="<select id=&#39;sel_"+rownum+"&#39;><option value=&#39;1&#39;>男</option><option value=&#39;0&#39;>女</option></select>";
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
//客户端删除一行
//每次只能删除一行，删除多行时出错
function btnDeleteRow()
{
$("#table1 tr").find("input[type=&#39;checkbox&#39;]").each(function(i){
if($(this).attr("checked"))
{
if(i!=0)//不能删除行标题
{
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
//这个比上面的要好，可以一下删除多个记录
function btnDeleteRow()
{
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type=&#39;checkbox&#39;]");
if(chk.attr("id")!="checkall")//不能删除标题行
{
if(chk.attr("checked"))
{
$(this).remove();
}
}
});
}
//客户端保存
function btnSaveClick()
{
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
//$("#table1 tr td").find("input[type=&#39;text&#39;]" || "select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type=&#39;text&#39;]").length>0)
{
alert($(this).find("input[type=&#39;text&#39;]").val());
}
else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}

Copy after login

<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>

Copy after login

The above is the detailed content of Summary of various examples of how jquery operates tables. For more information, please follow other related articles on the PHP Chinese website!