js遍历获取表格内数据的方法(必看)
程序员文章站
2022-06-11 19:26:30
本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。
1、一般的表格结构如下...
本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。
1、一般的表格结构如下
<table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr> <td>2</td> <td>wing</td> </tr> </table>
2、遍历表格中所有内容方法
首先需要給table加上id，这样方便定位到哪一个表格，例如
<table id="mytable"></table>
获取表格行数
<script type="text/javascript">
/**
* 获取表格行数
* @param int id 表格id
* @return int
*/
function gettablerowslength(id){
var mytable = document.getelementbyid(id);
return mytable.rows.length;
}
</script>
获取表格某一行列数
<script type="text/javascript">
/**
* 获取表格某一行列数
* @param int id 表格id
* @param int index 行数
* @return int
*/
function gettablerowcellslength(id, index){
var mytable = document.getelementbyid(id);
if(index<mytable.rows.length){
return mytable.rows[index].cells.length;
}else{
return 0;
}
}
</script>
遍历表格内容保存到数组
<script type="text/javascript">
/**
* 遍历表格内容返回数组
* @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<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new array();
}
data[i][j] = mytable.rows[i].cells[j].innerhtml;
}
}
return data;
}
</script>
3、遍历表格内容完整例子
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> 获取表格内容 </title>
<style type="text/css">
table{width:300px; border:1px solid #000000; border-collapse:collapse;}
td{border:1px solid #000000; border-collapse:collapse;}
</style>
<script type="text/javascript">
/**
* 遍历表格内容返回数组
* @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<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; 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<rows; i++){
for(j=0,cells=data[i].length; j<cells; j++){
tmp += data[i][j] + ',';
}
tmp += '<br>';
}
document.getelementbyid('result').innerhtml = tmp;
}
</script>
</head>
<body>
<table id="mytable">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>fdipzone</td>
</tr>
<tr>
<td>2</td>
<td>wing</td>
</tr>
</table>
<p><input type="button" name="btn" value="获取表格数据" onclick="showtablecontent('mytable')"></p>
<p><div id="result"></div></p>
</body>
</html>
以上这篇js遍历获取表格内数据的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 如何搜索影音先锋资源？xfplay影音先锋资源搜索方法
下一篇： oracle 查看被锁表以及解锁