js遍历获取表格内数据方法

本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成。table表示表格,tr表示行,td表示行中列。

1.一般的表格结构如下

<table>
 <tr>
   <td>idtd>
   <td>nametd>
 tr>
 <tr>
   <td>1td>
   <td>fdipzonetd>
 tr>
 <tr>
   <td>2td>
   <td>wingtd>
 tr>
table>  


2.遍历表格中所有内容方法

首先需要給table加上id,这样方便定位到哪一个表格,例如

<table id="mytable">table>

获取表格行数



获取表格某一行列数



遍历表格内容保存到数组


3.遍历表格内容完整例子


<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; ifor(var j=0,cells=mytable.rows[i].cells.length; jif(!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; ifor(j=0,cells=data[i].length; j',';
            }
            tmp += '
'
; } document.getElementById('result').innerHTML = tmp; } script> head> <body> <table id="mytable"> <tr> <td>idtd> <td>nametd> tr> <tr> <td>1td> <td>fdipzonetd> tr> <tr> <td>2td> <td>wingtd> tr> table> <p><input type="button" name="btn" value="获取表格数据" onclick="showTableContent('mytable')">p> <p><div id="result">div>p> body> html>

你可能感兴趣的:(js,遍历,table,rows,cells,javascript)