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

JavaScript015

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

function init()

 {

   vartable =document.getElementById("tab1")

   varrows = table.rows.length

   alert('行数'+rows)

   varcolums = table.rows[0].cells.length

   alert('列数'+colums)

 }

----根据列数自动循环显示隐藏

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>

javascript提供了获取表格中某一行单元格数的代码,参考如下:

document.getElementById('first').cells.length  // 获取id为first的行的单元格数目

实例演示如下:

创建Html元素

<div class="box">

<span>实例演示:获取表格第一行的单元格数量</span><br>

<div class="content">

    <table>

        <tr id="first"><td>1</td><td>2</td><td>3</td></tr>

        <tr><td>4</td><td>5</td><td>6</td></tr>

        <tr><td>7</td><td>8</td><td>9</td></tr>

    </table>

    <input type="button" value="获取表格第一行的单元格数量" onclick="fun_get()">

</div>

</div>

简单设置一下css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

table{border-collapse:collapse}

td{width:80pxheight:30pxline-height:30pxtext-align:centerborder:1px solid green}

编写jquery代码

<script>

function fun_get(){

alert(document.getElementById('first').cells.length)

}

</script>

观察效果