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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js如何获取table有多少行和列相关的知识,希望对你有一定的参考价值。

参考技术A JS获取表格行数和列数
<html>
<head>
<script type="text/javascript">
function show()

var tab = document.getElementById("test") ;
//表格行数
var rows = tab.rows.length ;
//表格列数
var cells = tab.rows.item(0).cells.length ;
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>

HTMLjs Table单击事件,获取表格行和列及单元格数值的方法

第一种方法:通过js来给table添加点击事件(如果表格新增行,就必须重新运行一次该代码,不然新增好,没有单击事件)

var Val=document.getElementById("tb_1");
            for(var i=0;i<Val.rows.length;i++)
            
                var cells=Val.rows[i].cells;
                for(var j=0;j<cells.length;j++)
                
                    cells[j].onclick=function()
                    
                        mui.toast(this.innerHTML);    //获取单击的值,但无法获取单击的行索引和列索引
                    
                
            

第二种方法:

<table id="tb_1"  onclick="TabClick();">//给Tabel加上一个Onclick();事件
 function TabClick()				   
  var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td 
 alert("行号:" + (td.parentElement.rowIndex) + ",列号:" + td.cellIndex); 
  td.innerHTML="dddd";        //设置单击单元格的值			
  

以上是关于js如何获取table有多少行和列的主要内容,如果未能解决你的问题,请参考以下文章

jquery 中 怎么获取行和列

如何用Jquery获取Table指定行中指定列的数值

[HTML]js Table单击事件,获取表格行和列及单元格数值的方法

[HTML]js Table单击事件,获取表格行和列及单元格数值的方法

用JS如何获得table中checkbox所在的行列值?弄了一个上午了好捉急!

HTMLjs Table单击事件,获取表格行和列及单元格数值的方法