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"