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

2019-11-19 16:55:06

字体：大中小

来源：转载

供稿：网友

本文将介绍如何使用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遍历获取表格内数据的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：selenium 与 chrome 进行qq登录并发邮件操作实例详解

下一篇：JS优化与惰性载入函数实例分析