js如何获取table有多少行和列

js如何获取table有多少行和列,第1张

JS获取表格行数和列数

<html>

<head>

<script type="text/javascript">

function show()

{

var tab = documentgetElementById("test") ;

//表格行数

var rows = tabrowslength ;

//表格列数

var cells = tabrowsitem(0)cellslength ;

alert("行数"+rows+"列数"+cells);

}

</script>

</head>

<body>

<table id="test" border="1">

<tr>

<td> </td><td>nbsp;</td>

</tr>

<tr>

<td> </td><td>nbsp;</td>

</tr>

</table>

<input type="button" onclick="show();"/>

</body>

</html>

1、JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells

使用实例: oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]

2、遍历

var oTable=documentgetElementById("表格id");

oTabletBodies[0]可以看成是rows和cells组成的二维数组,用两个for循环嵌套遍历一下就可以了

javascript中可以通过documentGetElementByID(你要获取的那个列的ID号,在上述代码中是<p>标记中的ID号)就可以获取你的这个元素,然后通过Innertext就可以获取里面的值了。

1、JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells 使用实例: oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]

js可以用td 对应的id获取该对象

例:<td id="td1"></td>

js:var td=documentgetElementById("td1");

可以用该对象赋予该td的style等属性

如果是要获得<td>苹果</td>里的"苹果"的话用下面的方法

我们把该值放到隐藏域里然后从js取得该值

<td>苹果<input type="hidden" name="pm1" id="pm1" value="苹果"></td>

js:var pm=documentgetElementById("pm1")value;

<table id="tbitem">

<tr><td>测试数据1</td></tr>

<tr><td>测试数据2</td></tr>

<tr><td>测试数据3</td></tr>

<tr><td>测试数据4</td></tr>

<tr><td>测试数据5</td></tr>

<tr><td>测试数据6</td></tr>

</table>

<script type="text/javascript">

var table = documentgetElementById("tbitem");

var td = tablegetElementsByTagName("td");

var len = tdlength;

for(i=0;i<len;i++){

alert(td[i]innerHTML);

}

</script>

var bak = [];

for( var k in data){

bakpush(data[k]bak);

}

差不多这样吧,data是ng-repeat用到的JSON数组,通过遍历把每个json中bak(即“备份目录”中的值)取出放到一个数组bak里,也不知你要求的是不是这样。

以上就是关于js如何获取table有多少行和列全部的内容,包括:js如何获取table有多少行和列、如何获取网页下table中的数据、在javascript怎么得到table单元格中的值或内容等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9511113.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存