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. Myeclipse配置tomcat和jdk

    1.打开Myeclipse,Windows--preference--出现如下窗口.Browse为导入解压的tomcat路径. 2.配置jdk.使用哪个tomcat,就配置哪个tomcat下的jdk, ...

  2. 大道浮屠诀---cwRsync同步工具的使用

    目的: 在日常生活中,我们有时候会遇到这样类似的问题 ---需要把一台服务器上的某个重要的文件进行备份(拷贝另外的服务器上) ---需要同步系统上的配置文件到其他系统 利用此cwRsync软件可以解决 ...

  3. 21个CSS技巧

    级联样式表(CSS)在当代Web设计中已经成为重要的环节,如果没有CSS现在的网站将像10年前一样不堪入目.随着CSS技术的普及,越来越多的高质量CSS教程涌入互联网,让我们的学习更加方便. 1.CS ...

  4. 以 Ubuntu 为例：清理 linux 系统的"垃圾"文件

    clean 命令删除所有的软件安装包. 在网络连接正常的情况下,我们执行软件安装命令,软件安装结束后,以 .deb 为后缀的软件包就不再需要了.这种情况和 Windows 平台.手机的安卓平台上的情况 ...

  5. InsightFace源码以及pre-train模型以及使用

    一下摘自:https://blog.csdn.net/Fire_Light_/article/details/79602705 论文链接:ArcFace: Additive Angular Margi ...

  6. Windows netsh

    用法: netsh [-a AliasFile] [-c Context] [-r RemoteMachine] [-u [DomainName\]UserName] [-p Password | * ...

  7. CSS——优雅降级和渐进增强

    什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...

  8. duilib教程之duilib入门简明教程10.界面设计器 DuiDesigner

    上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便.    所以这一章准备介绍duilib的UI设计器,由于这个设计器很不完善,也 ...

  9. Linux课程---14、linux下lamp环境如何安装

    Linux课程---14.linux下lamp环境如何安装 一.总结 一句话总结: 要按顺序安装,比如apache需要在php之前安装, 一.安装 gcc 编译器 二.卸载 rpm 安装的 http ...

  10. python的基本数据类型与字符串的操作

    一.基本数据类型 (int, bool, str ) int: 整数 str:字符串,一般不存放大量的数据 bool:布尔值,用来判断．True ,Flase list:列表,用来存放大量的数据. [ ...