JavaScript遍历table



1、说明

     遍历表格中的某行某列，并打印其值



2、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript遍历table</title>
<style type="text/css">
    tr td,tr th{
		border:#CCC 1px solid;
	}
</style>
<script type="text/javascript">
     /**
	  * JavaScript遍历table
	  */
     function eachTableRow()
	 {
		 //获取table序号
		 var tab=document.getElementById("tab");
		 //获取行数
     	 var rows=tab.rows;
		 //遍历行
     	 for(var i=1;i<rows.length;i++)
     	{
			//遍历表格列
        	for(var j=0;j<rows[i].cells.length;j++)
        	{
				//打印某行某列的值
       			alert("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
        	}
     	}
	 }
</script>
</head>

<body>
   <table id="tab" cellpadding="0" cellspacing="0" style="width:50%; text-align:center; border:#CCC 1px solid;">
       <tr style="border:#CCC 1px solid;">
         <th>学号</th>
         <th>姓名</th>
         <th>年龄</th>
         <th>性别</th>
       </tr>
       <tr>
         <td>2014010101</td>
         <td>张思思</td>
         <td>20</td>
         <td>女</td>
       </tr>
       <tr>
         <td>2014010102</td>
         <td>立三</td>
         <td>21</td>
         <td>男</td>
       </tr>
       <tr>
         <td>2014010103</td>
         <td>王玉</td>
         <td>22</td>
         <td>女</td>
       </tr>
       <tr>
         <td>2014010104</td>
         <td>朱莉</td>
         <td>23</td>
         <td>男</td>
       </tr>
   </table>
   <input type="button" value="遍历" onclick="eachTableRow()"/>
</body>
</html>



3、实现结果

（1）初始化时





（2）单击“遍历”





（3）再次单击“遍历”



JavaScript遍历table的更多相关文章

  1. JavaScript遍历table的行和列

    来源:http://blog.csdn.net/bobwu/article/details/7497412 <HTML> <head> <SCRIPT LANGUAGE= ...

  2. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  3. js遍历table中的每一个元素

    function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...

  4. [分享·JavaScript]提取Table中的内容到XML对象

    在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...

  5. 使用C#或javascript将Table里的数据导出到Excel

    原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...

  6. jQuery遍历table中间tr td并获得td价值

    jQuery遍历table中间tr td并获得td中间值 $(function(){ $("#tableId tr").find("td").each(func ...

  7. js遍历table 和 jquery 遍历table

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  8. JavaScript遍历对象-总结一

    原生JavaScript 遍历 1.for 循环遍历 let array1 = ['a','b','c']; for (let i = 0;i < array1.length;i++){ con ...

  9. 如何利用JavaScript遍历JSON数组

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. Oracle中的游标

    Oracle游标 概念:内存中的一块区域,存放select结果 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集.一.显示游标( ...

  2. 单元测试系列：如何使用JUnit+JaCoCo+EclEmma完成单元测试

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!   原文链接:http://www.cnblogs.com/zishi/p/6726664.html -----如 ...

  3. Nmap简单扫描

    Nmap所识别的6个端口状态. open(开放的) 应用程序正在该端口接收TCP 连接或者UDP报文.发现这一点常常是端口扫描 的主要目标.安全意识强的人们知道每个开放的端口 都是攻击的入口.攻击者或 ...

  4. 探索从 MVC 到 MVVM + Flux 架构模式的转变

    本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...

  5. 洛谷 [P4011] 孤岛营救问题

    状压+BFS 通过观察数据范围可知,我们应该状压钥匙种类,直接BFS即可 注意,一个点处可能不知有一把钥匙 #include <iostream> #include <cstdio& ...

  6. centos 7 配置 到多站点设置

    背景 : 前面配置了 win2008 WAMP环境, 这次因为一些事情 新买了服务器  只有 win2003 和 win2012, 试着配置2012 WAMP环境 发现比 2008 缺的配置文件多很多 ...

  7. MessagePack简析

    一.MessagePack是什么 先看官方的定义:MessagePack是一种高效的二进制序列化格式.它允许您像JSON一样在多个语言之间交换数据.但是,它更快并且更小. 从官方定义中,可以有如下的结 ...

  8. ------ 新春第一炮：阶乘算法性能分析与 double fault 蓝屏故障排查 Part I ------

    -------------------------------------------------------------------------- 春节期间闲来无事想研究下算法,上机测试代码却遇到了 ...

  9. Gentoo(贱兔)Linux安装笔记

      网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...

  10. 017 Java中的静态代理、JDK动态代理、cglib动态代理

    一.静态代理 代理模式是常用设计模式的一种,我们在软件设计时常用的代理一般是指静态代理,也就是在代码中显式指定的代理. 静态代理由业务实现类.业务代理类两部分组成.业务实现类负责实现主要的业务方法,业 ...