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遍历获取表格内数据方法的更多相关文章

  1. JavaScript之获取表格目标数据(TableDom.getTableData())

    [声明:  1.博文原创 未经同意转载必究,欢迎相互交流] [声明:  2.博主未知情况下转载,需显著处注明博文来源] [声明:  3.谢谢尊重劳动成果,谢谢理解与配合~] 一.背景 在生产过程和生活 ...

  2. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  3. JS简单获取当前日期时间的方法(yyyy-MM-dd hh:mm:ss)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

  5. C#使用Command将dataGrideView表格内数据与数据库交互

    本文主要介绍通过Command类使用SQL插入指令insert与查询指令select将dataGrideView表格内添加至数据库,与从数据库读出数据存放在dataGrideView表格中. C#制作 ...

  6. Django Models随机获取指定数量数据方法

    方法一:新增models的Manager方法 下面就直接发代码了 class RandomManager(models.Manager): def get_queryset(self): return ...

  7. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

  8. 【Javascript】JS遍历数组的三种方法：map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  9. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

随机推荐

  1. Vue的项目搭建及请求生命周期

    目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

  2. Deep Dive into Neo4j 3.5 Full Text Search

    In this blog we will go over the Full Text Search capabilities available in the latest major release ...

  3. 将sparkStreaming的结果保存到S3

    将spark解析的结果保存到S3 这个和保存到本地的区别在于,你需要配置aws的key和密码,以及它的region,代码如下 package com.alo7.spark import java.ut ...

  4. iOS开发系列-Lock

    概述 我们在使用多线程的时候多个线程可能会访问同一块资源,这样就很容易引发数据错乱和数据安全等问题,这时候就需要我们保证每次只有一个线程访问这一块资源,锁 应运而生. iOS中锁之前的性能的图标排行: ...

  5. Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法

    Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法 原因是因为该centos没有bzip ...

  6. js添加节点

    <!DOCTYPE html><html><body><script>var message=document.createTextNode(" ...

  7. Python连接数据库流行用到的第三方库

    Python连接数据库流行用到的第三方库: mysqldb:只支持Python2.x mysqlclient : mysqldb的衍生版本,完全兼容mysqldb,同时支持Python3.x,安装较复 ...

  8. Java 基础 - public、private、protected区别

    ref: https://www.cnblogs.com/pengfeiliu/p/3745934.html 类中的数据成员和成员函数据具有的访问权限包括:public.private.protect ...

  9. [JZOJ2679] 跨时代

    题目 题目大意 给你一堆边,你要将它们围成面积最大的矩形. 边不一定要用完,而且围成的矩形不能凸出一块. \(n\leq 16\) \(l_i \leq 15\) 思考历程 看到这题的第一眼,就会立马 ...

  10. 模拟MySQL命令

    staff_table 1,Alex Li,22,13651054608,IT,2013-04-01 2,Jack Wang,30,13304320533,HR,2015-05-03 3,Rain L ...