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. Codeforces 479【F】div3

    题目链接:http://codeforces.com/problemset/problem/977/F 题意:给你一串数字序列,让你求最长上升子序列,但是这个子序列呢,它的数字得逐渐连续挨着. 题解: ...

  2. neo4j常用cypher语句

    阅读更多 1.删除带有关系的节点   a.先删除关系 match (n:Node)-[r:关系名称]-() where (n...条件) delete r   b.删除节点 match (n:Node ...

  3. Read-Write lock 看可以，不过看的时候不能写

    当线程“读取”实例的状态时,实例的状态不会改变,只有线程对实例“写入”操作时才会改变.read-write lock 模式将读取和写入分开来处理,在读取数据前获取读锁定,而写入之前,必须获取写锁定. ...

  4. php pdo 获取数据转换为json

    php 查询语句获取数据,数据库有好多表现形式,如何拿出自己需要的数据 $raceSQL ='select id, race_name,race_code,content from je_race ' ...

  5. C puts，gets

    1.  char *gets(char *s); 从输入缓冲区中读取一个字符串存储到字符指针变量 str 所指向的内存空间 注意事项:空间不检查合理:要使用功能必须准备足够大的空间: #include ...

  6. leetcode-第10周双周赛-5081-歩进数

    题目描述: 自己的提交:参考全排列 class Solution: def countSteppingNumbers(self, low: int, high: int) -> List[int ...

  7. thinkphp 闭包支持

    闭包定义 我们可以使用闭包的方式定义一些特殊需求的路由,而不需要执行控制器的操作方法了,例如: 'URL_ROUTE_RULES'=>array( 'test' => function() ...

  8. vuecli脚手架+vue+vuex实现vue驱动的demo。

    哎呀呀呀,现在大家都要会Vue ||  React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...

  9. python基于SMTP发送邮件

    import smtplib from email.header import Header from email.mime.text import MIMEText ''' SMTP是发送邮件的协议 ...

  10. 记录一次hexo托管到coding失败，页面总是404，可是相同的代码托管到github是没问题的。

    文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...