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. 转：CSS盒模型

    W3C 组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主 要定义四个区域:内容(content).边框距 ...

  2. Elasticsearch 搭建

    最近需要用到Elasticsearch.下面简单介绍下Elasticsearch的搭建过程: ElasticSearch 使用java编写, 所以需要安装 Java 6以上 环境来运行. 并且确保设置 ...

  3. jquery的attr获取表单checked 布尔值问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. UVA 11178 /// 向量旋转 两向量夹角

    题目大意: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...

  5. Selenium(二)---无界面模式+滑动底部

    一.使用无界面模式 1.正常情况启动 selenium 是有界面的 2.有些情况下,需要不显示界面,这时只要设置一下参数就可以实现了 # 不想显示界面可以用 Chrome——配置一下参数就好 from ...

  6. sysobjects syscolumns

    在sysobjects系统表中存储着数据库的所有对象,每个对象都有一个唯一的id号进行标识.object_id就是根据对象名称返回该对象的id.反之,object_name是根据对象id返回对象名称. ...

  7. JAVA算法之高级排序

    本章介绍两种高级排序,希尔排序和快速排序,这两种排序比之前讲到的简单排序都要快很多:希尔排序大约需要O(N*(logN)2)的时间,快速排序的时间复杂度为(N*logN),这两种算法和我们在讲递归的时 ...

  8. Manager 进程间数据共享

    #_author:来童星#date:2019/12/11#Managersfrom multiprocessing import Process, Managerdef f(d, l,n): d[n] ...

  9. 阿里云在云栖大会发布RPA最新3.4版本，将与达摩院联合探索人工智能领域

    9月26日,在2019年杭州云栖大会上,阿里云发布了RPA最新V3.4版本,全新升级了增加诸如录屏审计.JAVA应用录制能力.达摩院OCR内置组件.语法检查与智能提示能力增强等功能. RPA全名称Ro ...

  10. csps退役记

    AFO 省二稳了,指望文化课吧 hzoi加油