1.在页面div中创建一个空白表,可以根据需要对其进行定制。
2.创建表之后,我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。
3.在<TB >标签中,我们添加了标签,主要用于提供用户输入参数,而全局变量num主要用于区分每个添加参数的唯一id。
4.获取表中的数据,以供下图参考。
5.一旦我们获得了表中的数据,我们就应该将其转换成json数据的形式。
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>
观察效果
1、JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells使用实例: oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]2、遍历var oTable=document.getElementById("表格id")oTable.tBodies[0]可以看成是rows和cells组成的二维数组,用两个for循环嵌套遍历一下就可以了