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. PyTorch中，关于model.eval()和torch.no_grad()

    一直对于model.eval()和torch.no_grad()有些疑惑 之前看博客说,只用torch.no_grad()即可 但是今天查资料,发现不是这样,而是两者都用,因为两者有着不同的作用 引用 ...

  2. 17-MySQL-Ubuntu-数据表的查询-分页(六)

    分页(limit) 注: (1)limit位于SQL语句的最后面; (2)limit 2; 2表示查询前两条数据; (3)limit 0,2;  0表示查询第1页的起始数据的下标,2表示每页有两条数据 ...

  3. netty 文件传输

    FileServer package com.zhaowb.netty.ch13_1; import io.netty.bootstrap.ServerBootstrap; import io.net ...

  4. window下apache2.2配置多个tomcat使用不同二级域名，共用80端口

    思路:分3步, 1,安装apache服务器httpd-2.2.25-win32-x86-no_ssl.msi,安装tomcat 2,配置tomcat默认访问的项目,配置apache服务器 3,测试 第 ...

  5. pytorch,cuda8,torch.cuda.is_available return flase (ubuntu14)

    因为ubuntu 系统是14.0的,安装pytorch1.0的时候,本身已经安装好了cuda8,在验证gpu的时候,torch.cuda.is_available()返回false 安装命令是: co ...

  6. VBA文件对话框的应用（VBA打开文件、VBA选择文件、VBA选择文件夹)

    在VBA中经常要用到文件对话框来进行打开文件.选择文件或选择文件夹的操作.用Microsoft Office提供的文件对话框比较方便.用法如下Application.FileDialog(fileDi ...

  7. java中的栈Stack

    Stack:栈是一种只能在一端进行插入或删除操作的线性表.(先进后出表) java中的Stack继承Vector 实例化 Stack stack=new Stack(); 基本使用 判断是否为空 st ...

  8. Android开发 string.xml资源添加参数

    挖坑:参考:https://www.cnblogs.com/leelugen/p/6685905.html

  9. SpringBoot 非web项目简单架构

    1.截图 2.DemoService package com.github.weiwei02.springcloudtaskdemo; import org.springframework.beans ...

  10. SpringBoot-application：application.yml/配置文件详解

    ylbtech-SpringBoot-application:application.yml/配置文件详解 springboot采纳了建立生产就绪spring应用程序的观点. Spring Boot优 ...