js遍历获取表格内数据的方法(必看)
更新时间：2017年04月06日 10:09:12 投稿：jingxian
下面小编就为大家带来一篇js遍历获取表格内数据的方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文将介绍如何使用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遍历获取表格内数据的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现QQ列表展开收缩扩展功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
TypeScript中的接口Interface详解(对象类型的强大工具)
TypeScript中的接口是一个强大而灵活的特性,它为我们提供了一种清晰、简洁的方式来定义对象的结构和类型,通过使用接口,我们可以编写更加健壮、可维护的代码,这篇文章主要介绍了TypeScript中的接口(Interface):对象类型的强大工具,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了微信小程序实现即时通信聊天功能的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了防止video视频被下载的处理方法汇总,本文给大家介绍了多种方法帮助大家解决防止video视频被下载的问题,补充介绍了解决video标签视频禁止下载方法,感兴趣的朋友一起看看吧2024-02-02
下面小编就为大家带来一篇js enter键激发事件实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JS实现兼容各种浏览器的获取选择文本的方法,可实现鼠标拖动选择文本的同时,下方显示区同步实时显示选中内容的功能,涉及javascript响应鼠标事件及页面元素动态操作技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript交换变量常用4种方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要为大家详细介绍了js canvas实现5张图片合成一张图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了Javascript实现时间倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了JavaScript记录光标在编辑器中位置的实现方法,涉及JavaScript鼠标事件结合页面元素的操作技巧,需要的朋友可以参考下2016-04-04
最新评论