js遍历获取表格内数据的方法(必看)


Posted in Javascript onApril 06, 2017

本文将介绍如何使用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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
validform表单验证的实现方法
Mar 08 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
JS优化与惰性载入函数实例分析
Apr 06 #Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
JS实现的二叉树算法完整实例
Apr 06 #Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 #Javascript
js实现按座位号抽奖
Apr 05 #Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 #Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 #Javascript
You might like
文章推荐系统(二)
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
基于python3的socket聊天编程
2020/02/17 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
征兵宣传标语
2014/06/20 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers
mysql查看表结构的三种方法总结
2022/07/07 MySQL
Windows7下FTP搭建图文教程
2022/08/05 Servers