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. C# Ioc ASP.NET MVC Dependency Injection

    ASP.NET MVC Dependency Injection 同志们,非常快速的Ioc注册接口和注入Mvc Controller,步骤如下: 安装Unity.Mvc NuGet Package 在 ...

  2. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  3. ansible playbook实践(一)-基础环境安装

    1 介绍 Ansible 是一个系统自动化工具,用来做系统配管理,批量对远程主机执行操作指令. 2 实验环境 ip 角色 192.168.40.71 ansible管控端 192.168.40.72 ...

  4. RChain的Casper共识算法

    RChain的Casper共识算法是基于Vlad Zamfir的correct-by-construction共识协议和CTO Greg Meredith和其他RChain成员讨论而来的.他们还为Ca ...

  5. vue1.0中$index一直报错的解决办法

    原文链接:https://www.cnblogs.com/liqiong-web/p/8144925.html 看学习视频,因为年份比较早了,其实vue早已迭代到vue2.0了,遇到一些问题: v-f ...

  6. Windows Server 2016-图形化迁移FSMO角色

    上章节我们简单介绍了三种不同方式查看FSMO主机角色信息,在开篇之前我们简单回顾一下FSMO五种操作主机角色:林范围操作主机角色有两种,分别是 架构主机角色(Schema Master)和 域命名主机 ...

  7. ajax调用handler，使用HttpWebRequest访问WCF服务

    引言 随着手机及移动设备的普及,移动端的应用也进入了热潮.以前PC端的门户网站,大多也均推出了适配移动设备的网站或者APP,再差的也注册了个公众号.在移动应用开发中,目前据我所了解到的解决方案有:1. ...

  8. 使用Dism备份和全新恢复系统

    1.使用WinPE启动,winPE制作可以参考我的另一文章http://www.cnblogs.com/karl-F/p/6934086.html 2.捕获C盘镜像 (1)查看磁盘 在PE提示符:输入 ...

  9. TinyMce 使用初探

    https://www.cnblogs.com/nkxyf/p/3883586.html 参考:http://www.tinymce.com/    官网 http://www.tinymce.com ...

  10. mysql查找以逗号分隔的值-find_in_set

    有了FIND_IN_SET这个函数.我们可以设计一个如:一只手机即是智能机,又是Andriod系统的. 比如:有个产品表里有一个type字段,他存储的是产品(手机)类型,有 1.智能机,2.Andri ...