JavaScript遍历table



1、说明

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



2、实现源码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JavaScript遍历table</title>
  6. <style type="text/css">
  7.     tr td,tr th{
  8. 		border:#CCC 1px solid;
  9. 	}
  10. </style>
  11. <script type="text/javascript">
  12.      /**
  13. 	  * JavaScript遍历table
  14. 	  */
  15.      function eachTableRow()
  16. 	 {
  17. 		 //获取table序号
  18. 		 var tab=document.getElementById("tab");
  19. 		 //获取行数
  20.      	 var rows=tab.rows;
  21. 		 //遍历行
  22.      	 for(var i=1;i<rows.length;i++)
  23.      	{
  24. 			//遍历表格列
  25.         	for(var j=0;j<rows[i].cells.length;j++)
  26.         	{
  27. 				//打印某行某列的值
  28.        			alert("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
  29.         	}
  30.      	}
  31. 	 }
  32. </script>
  33. </head>
  34.  
  35. <body>
  36.    <table id="tab" cellpadding="0" cellspacing="0" style="width:50%; text-align:center; border:#CCC 1px solid;">
  37.        <tr style="border:#CCC 1px solid;">
  38.          <th>学号</th>
  39.          <th>姓名</th>
  40.          <th>年龄</th>
  41.          <th>性别</th>
  42.        </tr>
  43.        <tr>
  44.          <td>2014010101</td>
  45.          <td>张思思</td>
  46.          <td>20</td>
  47.          <td>女</td>
  48.        </tr>
  49.        <tr>
  50.          <td>2014010102</td>
  51.          <td>立三</td>
  52.          <td>21</td>
  53.          <td>男</td>
  54.        </tr>
  55.        <tr>
  56.          <td>2014010103</td>
  57.          <td>王玉</td>
  58.          <td>22</td>
  59.          <td>女</td>
  60.        </tr>
  61.        <tr>
  62.          <td>2014010104</td>
  63.          <td>朱莉</td>
  64.          <td>23</td>
  65.          <td>男</td>
  66.        </tr>
  67.    </table>
  68.    <input type="button" value="遍历" onclick="eachTableRow()"/>
  69. </body>
  70. </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. 结合Nginx以cgi方式安装php5.5.4

    新建用户及用户组 groupadd webuser useradd -g webuser webuser 下载php-5.5 下载链接:http://pan.baidu.com/s/1i3CBshv ...

  2. Python基础篇(六)

    retun空值,后面的语句将不再被执行 >>> def test(): ...    print("just a test!") ...    return .. ...

  3. BZOJ 4514: [Sdoi2016]数字配对 [费用流 数论]

    4514: [Sdoi2016]数字配对 题意: 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数 ...

  4. BZOJ 1299: [LLH邀请赛]巧克力棒 [组合游戏]

    每次一人可以从盒子里取出若干条巧克力棒,或是将一根取出的巧克力棒吃掉正整数长度. Nim游戏多了一个决策:拿出一些石堆 显然只要给对方构造异或和为0的子集就行了 暴枚子集... #include &l ...

  5. dos命令（入门）

    先说一下dos命令在很多情况下的共有特性 1.大小写一样,如dir和DIR 2.盘符后不加目录时,像"dir E:"和"dir E:\"没什么区别 3.使用形如 ...

  6. php+redis 学习 五 消息推送

    <?php header('content-type:text/html;chaeset=utf-8'); /** * redis实战 * * 发布 * * @example php publi ...

  7. Spring Boot让开发如此简单

    从html到asp后一直专注.net开发,从.net诞生到如今,从winform到webform,从asp.net到.net mcv,从.net mvc到.net core,从ado.net到linq ...

  8. 查看Zookeeper服务器状态信息的一些命令

    1.Zookeeper服务器当前节点配置信息: echo conf|nc localhost 2181 2.cons:echo cons|nc localhost 2181 输出当前服务器所有客户端连 ...

  9. sql server两个时间段内，求出周末的量

    公司有个表记录了出差(加班)的初始时间和截止时间,现在要计算出加班时间,之前的设计并没有考虑到这部分,因此本人通过sql重新计算周末数 表formmain starttime endtime 使用游标 ...

  10. CUP、内存、磁盘是如何在一起工作的

    IT技术发展到今天,计算机能做的事情可谓复杂的多.那么计算机是如何做出如此复杂的运算的呢? 不准确的说,计算机主要做两件事,数据计算和数据存储. 第一先说说计算机是如何计算的吧. 我们平时见到的所有计 ...