HTML中js操作table

红太狼 2023-08-17 17:40 52阅读 0赞

**一、获取每一个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"   οnclick="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，关键字：添加（append），删除（remove）**

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

//添加
    //先将要添加行的html代码拼接好，赋值到变量中，这里我就不拼接了，用trhtml代替
    var tr=trhtml;
    $("#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

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

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

相关阅读

相关 HTML中js操作table

一、获取每一个tr 1、通过table的id获取，如id="tables" 获取第一行tr，索引从0开始，用eq(),方法里面的索引可以手动更换，如第二行就是1，也可以循

红太狼/ 2023年08月17日 17:40/ 0 赞/ 53 阅读

相关 DOM操作HTML（JS加强）

DOM简介和解析HTML DOM 文档对象类型 Document Object Model 文档：标记型文档（HTML/XML）对象：封装属性和行为（方法）

浅浅的花香味﹌/ 2022年09月25日 13:27/ 0 赞/ 93 阅读

相关 html5中的table元素

<html> <head> <title>Table</title> </head>

亦凉/ 2022年08月22日 13:19/ 0 赞/ 116 阅读

相关 html中table的基本格式

table的基本格式![这里写图片描述][20160515231202128] [20160515231202128]: /images/20220722/ecacf528

柔光的暖阳◎/ 2022年07月24日 06:19/ 0 赞/ 108 阅读

相关 JS之动态TABLE操作

![20170207163144155][] <html> <head> <meta http-equiv="Content-Type" conten

痛定思痛。/ 2022年07月12日 02:22/ 0 赞/ 113 阅读

相关 JS之动态TABLE操作

![20170207163144155][] <html> <head> <meta http-equiv="Content-Type" conten

￡神魔★判官ぃ/ 2022年07月12日 02:22/ 0 赞/ 148 阅读

相关 js把html中的table数据导出到Excel中

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

雨点打透心脏的1/2处/ 2022年06月05日 23:48/ 0 赞/ 198 阅读

相关 HTML05.Table

<html> <head> <meta charset="utf-8"> <title>TABLE表格的

约定不等于承诺〃/ 2022年06月01日 10:19/ 0 赞/ 90 阅读

相关 HTML表格table

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用div+css实现页面布局。如何创建HTML表格：H

淡淡的烟草味﹌/ 2022年05月15日 00:30/ 0 赞/ 288 阅读

相关 js操作表格、table、

js添加一行、删除一行 let str="<tr>"

心已赠人/ 2021年11月01日 08:48/ 0 赞/ 424 阅读