{
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>
观察效果