js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)

發(fā)布時間：2020-10-02 01:47:11 來源：腳本之家閱讀：260 作者：jingxian 欄目：web開發(fā)

本文將介紹如何使用js獲取表格內(nèi)某一單元格的內(nèi)容，表格由table,tr,td等html標(biāo)記組成。table表示表格，tr表示行，td表示行中列。

1、一般的表格結(jié)構(gòu)如下

<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、遍歷表格中所有內(nèi)容方法

首先需要給table加上id，這樣方便定位到哪一個表格，例如

<table id="mytable"></table>
獲取表格行數(shù)

<script type="text/javascript">
/** 
 * 獲取表格行數(shù)
 * @param Int id 表格id
 * @return Int
 */
function getTableRowsLength(id){
  var mytable = document.getElementById(id);
  return mytable.rows.length;
}
</script>

獲取表格某一行列數(shù)

<script type="text/javascript">
/** 
 * 獲取表格某一行列數(shù)
 * @param Int id  表格id
 * @param Int index 行數(shù)
 * @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>

遍歷表格內(nèi)容保存到數(shù)組

<script type="text/javascript">
/** 
 * 遍歷表格內(nèi)容返回數(shù)組
 * @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、遍歷表格內(nèi)容完整例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <title> 獲取表格內(nèi)容 </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">

  /** 
   * 遍歷表格內(nèi)容返回數(shù)組
   * @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;
  }

  /** 
   * 顯示表格內(nèi)容
   * @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="獲取表格數(shù)據(jù)" onclick="showTableContent('mytable')"></p>
  <p><div id="result"></div></p>
 </body>
</html>

以上這篇js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽