JavaScript获取tr td 的三种方式全面总结(推荐)

网络编程 2025-03-29 21:17www.168986.cn编程入门

方法一:原生的JavaScript

```javascript

var rows = table.getElementsByTagName("tr"); // 获取所有行

for (var i = 1; i < rows.length; i++) { // 从第二行开始遍历

var cells = rows[i].children; // 获取当前行的所有单元格

var idtext = cells[1]nerHTML; // 获取第二个单元格的内容

// 后续操作...

}

```

方法二:使用jQuery

利用jQuery的简洁语法,你可以更轻松地获取``并遍历所有的``。注意,使用`.text()`来获取单元格显示的文本内容。

```javascript

$('selectIds').val(""); // 初始化值

$("tb_table").find("tr").each(function(){

var tdContent = $(this).children().eq(1).text(); // 获取第二个单元格的文本内容

if(tdContent != '人员ID'){ // 假设我们不处理包含'人员ID'的单元格

$('selectIds').val($('selectIds').val() + "," + tdContent); // 累加值

console.log("选中的数据", tdContent); // 输出选中的数据

}

});

```

方法三:原生JavaScript的另一种方式

这种方法同样是使用原生JavaScript,它获取所有行,然后进一步获取每个单元格的内容。你可以看到这种方式提供了对单个单元格内容的详细访问。

```javascript

var rows = table.rows; // 获取所有行对象

for (var i = 1; i < rows.length; i++) { // 从第二行开始遍历

var cells = rows[i].cells; // 获取当前行的所有单元格

var id = cells[1]nerHTML; // 获取第二个单元格的HTML内容(包括标签)

console.log("单元格内容", id); // 输出单元格内容

}

```

注意几点:

- `$(this).children().eq(1).text()` 获取的是显示的值。

- `$(this).children().eq(1).html()` 获取的是 `` 之间的所有内容,包括标签。

- `$('.trSelected', grid).find("td").eq(7).text()` 获取的是选中行中的特定单元格内容。

- 设置值可以使用 `$('.trSelected', grid).find("td").eq(7).text('设置的内容')`。

- `xnerHTML` 是JavaScript中用于获取元素内部HTML内容的方式。

```javascript

var tab = document.getElementById("grid");

```

```javascript

var rows = tab.rows;

```

接下来,我们可以通过两层循环遍历每一行和每一列:

```javascript

for(var i=0; i

for(var j=0; j

alert("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j]nerHTML); //输出单元格内容

}

}

```

上一篇:ajax调用简单实例 下一篇:没有了

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by