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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
详解原生js实现offset方法
Jun 15 Javascript
理解javascript async的用法
Aug 22 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JS正则表达式验证端口范围(0-65535)
Jan 06 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python创建日历实例
2014/08/21 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python避免死锁方法实例分析
2015/06/04 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
平安工地建设方案
2014/05/06 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
工作年限证明模板
2014/11/01 职场文书
公司员工体检通知
2015/04/21 职场文书
网吧员工管理制度
2015/08/05 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python