汇总常用的jQuery操作Table tr td方法

淩亂°似流年 2022-06-02 12:50 166阅读 0赞

*   *  鼠标移动行变色
     *  奇偶行不同颜色
     *  隐藏一行
     *  隐藏一列
     *  删除一行
     *  删除一列
     *  得到设置某个单元格的值
     *  插入一行
     *  9获取每一行指定的单元格的值
     *  10全选或全不选
     *  11客户端动态添加行删除行

虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率。

## 1.鼠标移动行变色 ##

$(“\#table1 tr”).hover(function()\{

$(this).children(“td”).addClass(“hover”)

\},function()\{

$(this).children(“td”).removeClass(“hover”)

\})  
方法二：

$(“\#table1 tr:gt(0)”).hover(function() \{

$(this).children(“td”).addClass(“hover”);

\}, function() \{

$(this).children(“td”).removeClass(“hover”);

\});

## 2.奇偶行不同颜色 ##

$(“\#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”)

## 3.隐藏一行 ##

$(“\#table1 tbody tr:eq(3)”).hide();

## 4.隐藏一列 ##

$(“\#table1 tr td::nth-child(3)”).hide();

方法二：

\[html\] view plain copy

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

## 5.删除一行 ##

//删除除第一行外的所有行

$(“\#table1 tr:not(:first)”).remove();

//删除指定行  
$(“\#table1 tr:eq(3)”).remove();

## 6.删除一列 ##

//删除除第一列外的所有列

$(“\#table1 tr th:not(:nth-child(1))”).remove();

$(“\#table1 tr td:not(:nth-child(1))”).remove();

//删除第一列  
$(“\#table1 tr td::nth-child(1)”).remove();

## 7.得到（设置）某个单元格的值 ##

//设置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();

## 8.插入一行： ##

< strong > //在第二个tr后插入一行

("<*t**r*><*t**d*>插入3</*t**d*><*t**d*>插入</*t**d*><*t**d*>插入</*t**d*><*t**d*>插入</*t**d*></*t**r*>").*i**n**s**e**r**t**A**f**t**e**r*((“\#table7 tr:eq(1)”));

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

var arr = \[\];

$(“\#table1 tr td:nth-child(1)”).each(function (key, value) \{

arr.push($(this).html());

\});  
var result = arr .join(‘,’);

## 10、全选或全不选 ##

//方法一：  
//全选或全不选 此传入的参数为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 = ‘checkbox’ \]”);

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 = ‘checkbox’ \]”);

input.attr(“checked”,evt.checked);

\}  
\}

//方法三：  
//全选或全不选 此传入的参数为this 如：checkAll(this)

function checkAll(evt)

\{  
$(“\#table1 tr”).find(“input\[ type = ‘checkbox’ \]”).each(function(i)\{

$(this).attr(“checked”,evt.checked)

\});  
\}

//方法四：  
//全选或全不选 此传入的参数为this 如：checkAll(this)

function checkAll(evt)

\{  
$(“\#table1 tr”).find(“input\[ type = ‘checkbox’ \]”).attr(“checked”,evt.checked);

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

function btnAddRow()

\{  
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2

var rownum =$(“\#table1 tr”).length-2;

var chk = “ “;

var text = “ “;

var sel = “ < option value = ‘1’ > 男 < option value = ‘0’ > 女 “;

var row = “” +chk+” < td > “+text+” < td > “+sel+” < td > “+text+” < td > “+text+” “;

(*r**o**w*).*i**n**s**e**r**t**A**f**t**e**r*((“\#table1 tr:eq(“+rownum+”)”));

//客户端删除一行

//每次只能删除一行，删除多行时出错

function btnDeleteRow()

\{  
$(“\#table1 tr”).find(“input\[ type = ‘checkbox’ \]”).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 = ‘checkbox’ \]”);

if(chk.attr(“id”)!=”checkall”)//不能删除标题行

\{  
if(chk.attr(“checked”))

\{  
$(this).remove();

\}  
\}  
\});  
\}  
//客户端保存  
function btnSaveClick()

\{  
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值

//$(“\#table1 tr td”).find(“input\[ type = ‘text’ \]” || “select”).each(function(i)\{

//alert($(this).val());

//\});

$(“\#table1 tr”).find(“td”).each(function(i)\{

if($(this).find(“input\[ type = ‘text’ \]”).length > 0)

\{  
alert($(this).find(“input\[ type = ‘text’ \]”).val());

\}  
else if($(this).find(“select”).length > 0)

\{  
alert($(this).find(“select”).val());

\}  
\});  
\}

原文 [http://blog.cnsolomo.com/ld/web/210.html][http_blog.cnsolomo.com_ld_web_210.html]

[http_blog.cnsolomo.com_ld_web_210.html]: http://blog.cnsolomo.com/ld/web/210.html

汇总常用的jQuery操作Table tr td方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jquery 获取tr中的td，td中的input

相关 jquery、js获取table,遍历输出tr中各个td的内容

相关 Jquery常用的方法汇总

相关汇总常用的jQuery操作Table tr td方法

相关 TABLE中TR、TH和TD

相关 jquery遍历table的tr获取td的值

相关 jquery遍历table的tr获取td的值

相关动态添加table tr td 表格

相关 table tr td圆角

相关如何设置table中<tr>和<td>的高度