html如何获取表格行数据,js遍历获取表格内数据的方法(必看)

本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。

1、一般的表格结构如下

id	name
1	fdipzone
2	wing

2、遍历表格中所有内容方法

首先需要給table加上id，这样方便定位到哪一个表格，例如

获取表格行数

/**

* 获取表格行数

* @param Int id 表格id

* @return Int

*/

function getTableRowsLength(id){

var mytable = document.getElementById(id);

return mytable.rows.length;

}

获取表格某一行列数

/**

* 获取表格某一行列数

* @param Int id 表格id

* @param Int index 行数

* @return Int

*/

function getTableRowCellsLength(id, index){

var mytable = document.getElementById(id);

if(index

return mytable.rows[index].cells.length;

}else{

return 0;

}

}

遍历表格内容保存到数组

/**

* 遍历表格内容返回数组

* @param Int id 表格id

* @return Array

*/

function getTableContent(id){

var mytable = document.getElementById(id);

var data = [];

for(var i=0,rows=mytable.rows.length; i

for(var j=0,cells=mytable.rows[i].cells.length; j

if(!data[i]){

data[i] = new Array();

}

data[i][j] = mytable.rows[i].cells[j].innerHTML;

}

}

return data;

}

3、遍历表格内容完整例子

获取表格内容

table{width:300px; border:1px solid #000000; border-collapse:collapse;}

td{border:1px solid #000000; border-collapse:collapse;}

/**

* 遍历表格内容返回数组

* @param Int id 表格id

* @return Array

*/

function getTableContent(id){

var mytable = document.getElementById(id);

var data = [];

for(var i=0,rows=mytable.rows.length; i

for(var j=0,cells=mytable.rows[i].cells.length; j

if(!data[i]){

data[i] = new Array();

}

data[i][j] = mytable.rows[i].cells[j].innerHTML;

}

}

return data;

}

/**

* 显示表格内容

* @param Int id 表格id

*/

function showTableContent(id){

var data = getTableContent(id);

var tmp = '';

for(i=0,rows=data.length; i

for(j=0,cells=data[i].length; j

tmp += data[i][j] + ',';

}

tmp += '
';

}

document.getElementById('result').innerHTML = tmp;

}

id	name
1	fdipzone
2	wing

以上这篇js遍历获取表格内数据的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持找一找教程网。