HTML中js操作table

一、获取每一个tr

1、通过table的id获取,如id="tables"

 获取第一行tr,索引从0开始,用eq(),方法里面的索引可以手动更换,如第二行就是1,也可以循环tr,eq里面就是循环变量

 $("#tables tr").eq(0);
//遍历每一行

  for (var i = 0; i < $("#tables tr").length; i++) {
    $("#tables tr").eq(i);
  }

2、通过tbody获取tr,id="tbodys",aa的值可自行设置相应的索引,关键字“find”,子级

$("#tbodys").find('tr').eq(aa);

3、获取操作本行tr,如果tr内部某个元素要操作本行,比如行内删除按钮或者编辑按钮,<input type="text"   onclick="TrDemo(this);" />,

这里建议将点击事件写在标签内部,传this过去,静态行可以直接在js中写点击事件,用$(this)操作,动态行这样是无效的,必须在标签内部传this,才可以操作,关键字:“closest

function TrDemo(temp) {
   $(temp).closest('tr')
}

4、获取上一行tr,关键字:prev 上一行

$(this).closest('tr').prev()

5、获取下一行tr,关键字:next 下一行

$(this).closest('tr').next()

6、获取最后一行tr,关键字last这里用tbody操作示例,id="tbodys"

$("#tbodys").find('tr:last')

二、td的操作获取方式

  td是通过tr获取,tr的操作根据上面所述,这里就不详细写tr的操作,用$("#tr")代替

1、获取一行中每一个td,关键字“children”

$("#tr").children('td').eq(aa)//aa可以设置任何自己需要的索引值

//遍历td
for (var i=0;i<$("#tr").children('td').length;i++){
   $("#tr").children('td').eq(i)
}

2、获取td里面的值

//如果td内部没有子级,那直接获取td值是text(),aa可以自行设置自己所需td的索引值
$("#tr").children('td').eq(aa).text();

//如果内部有子级,可根据所要获取的层级,用find('#id')/find('.class')获取,id和class可根据自己设置的填写
//比如获取第一个td里面文本框的值,id="txt"
$("#tr")
.children('td').eq(0).find('#txt').val();

3、操作行内元素,表格里面的元素也是可以根据上面方法获取并操作的,具体操作在获取到之后和普通jquery操作一样

     这里举例隐藏td内的某个表单元素和设为只读,文本框id="txt"

//隐藏
$("#tr").children('td').eq(aa).find('#txt').css("display","none");
//只读
$("#tr").children('td').eq(aa).find('#txt').attr("disabled","disabled");

三、添加/删除tr,关键字:添加(prepend, append),删除(remove)

tr的删除也是可以按照上面所述的tr操作中,获取某一行的上一行或者下一行或者本行进行删除,这里用$("#tbodys")代表tbody,$("#tr")代表要操作的行,

//添加
//先将要添加行的html代码拼接好,赋值到变量中,这里我就不拼接了,用trhtml代替
var tr=trhtml;
//插入在第一行之前,成为首行
$("#tbodys").prepend(tr);

//插入到末尾最后一行
$("#tbodys").append(tr);

//删除行
$("#tr").remove();

四、合并行,合并列

1、合并列:colspan,在td/th标签里使用此属性合并相应数量单元格,合并的数量就是colspan的赋值,如colspan="2"

2、合并行:rowspan,在td标签里使用此属性合并相应数量单元格,合并的数量就是rowspan的赋值,如rowspan="2"

原文地址:https://www.cnblogs.com/zyg316/p/11458146.html