js取得table中td值的问题

最新推荐文章于 2022-09-07 11:49:04 发布

奋斗中的小白123

最新推荐文章于 2022-09-07 11:49:04 发布

阅读量1.7k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zlin_221/article/details/46746125

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

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

<style type="text/css">
table,table tr td{
border:1px solid black;
}
</style>

</head>

<body>
<input type="button" value="aa" οnclick="aa();" />
<input type="button" value="bb" οnclick="bb();" />
<input type="button" value="cc" οnclick="cc();" />
<input type="button" value="dd" οnclick="dd();" />
<table>
<tbody id="listContent">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>

<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</tbody>
</table>

//第一种方法

function aa()
{

var table = document.getElementById("listContent");//获取第一个表格

//var text=table.rows[0].cells[1].innerText;//获取第一行，第二列文本

//var text=table.rows[1].cells[0].innerText;//获取第二行，第一列文本

//var text=table.rows[2].cells[1].innerText;//获取第三行，第二列文本

var text=table.rows[2].cells[2].innerText;//获取第三行，第三列文本
alert(text);

}

//第二种方法
function bb()
{
var tab = document.getElementById("listContent");
var rows = tab.rows.length;

/*
//获取到第一行第一列的文本
var cols = tab.rows[0].childNodes; //行数从'0'开始计算
var atext=cols[1].innerText; //列数从'1'开始计算
*/

/*
//获取第二行第二列
var cols = tab.rows[1].childNodes; //表格第1行，获取行数索引为"1"
var atext=cols[3].innerText; //表格列数第二行，获取列数索引为'3'
*/

//获取第三行第三列
var cols = tab.rows[2].childNodes; //表格第1行，获取行数索引为"3"
var atext=cols[5].innerText; //表格列数第二行，获取列数索引为'5'

alert(atext);

}

//第三种方法

function cc()
{
var tb=document.getElementById("listContent");
var trs=tb.childNodes;

/*
//获得第一行第一列
var tds=trs[1].childNodes;
var atd=tds[1].innerText;
*/

/*
//获得第二行第一列
var tds=trs[3].childNodes;
var atd=tds[1].innerText;
*/

/*
//获得第三行第一列
var tds=trs[5].childNodes;
var atd=tds[1].innerText;
*/

/*
//获得第一行第二列
var tds=trs[1].childNodes;
var atd=tds[3].innerText;
*/

//获得第一行第三列
var tds=trs[1].childNodes;
var atd=tds[5].innerText;

alert(atd);
}

//第四种方法

function dd()
{
var tb=document.getElementById("listContent");
var trs=tb.getElementsByTagName("tr");
//获取第一行的td
var firtds=trs[0].getElementsByTagName("td");
//alert("第一行第一列="+firtds[0].innerText);
//alert("第一行第二列="+firtds[1].innerText);
//alert("第一行第三列="+firtds[2].innerText);

//获取第二行td
var sectds=trs[1].getElementsByTagName("td");
alert("第二行第一列="+sectds[0].innerText);

}
</script>
</body>

</html>

在上面获取table子节点的时候，有时候取第二列的值，索引需要写‘3’，这是因为浏览器解析的问题。

因为有些浏览器会把元素之间中间的注释、空白符等也会解析为子节点。

最恶心的一种方法是：你也可以把中间所有的空白符去掉。那么界面就会变得紧凑很难看。

也可以获取了全部子节点之后，判断一下节点的nodeType属性，

for(var i=0,len=element.childNodes.length;i<len;i++)

{

if(element.childNodes[i].nodeType==1)

{

..........

}

奋斗中的小白123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js取得table中td值的问题

例子：table,table tr td{border:1px solid black;} 第一行第一列第一行第二列第一行第三列第二行第一列第二行第二列第二行第三列第三行第一列第三行第二列第三行第三列
复制链接

扫一扫

专栏目录