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. win7 重装 docker 启动后无法启动错误解决

    描述 win7 重新安装Docker 后启动  Docker Quickstart Terminal 出现如下错误 Starting "default"... (default) ...

  2. HDU [P1704] Rank

    传递闭包裸题 但是本题的Floyd一定要优化,不然会T cpp #include <iostream> #include <cstdio> #include <cstri ...

  3. HDU2089 不要62 BZOJ1026: [SCOI2009]windy数 [数位DP]

    基础题复习 这次用了dfs写法,感觉比较好 #include <iostream> #include <cstdio> #include <cstring> #in ...

  4. BZOJ 1898: [Zjoi2005]Swamp 沼泽鳄鱼 [矩阵乘法]

    1898: [Zjoi2005]Swamp 沼泽鳄鱼 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1082  Solved: 602[Submit][S ...

  5. 使用angular/react/vue实现相同的面试题组件

    面试题要求如下所示 1.angular: <!DOCTYPE html><html lang="en"><head> <meta char ...

  6. XML+JSON面试题都在这里

    XML+JSON常见面试题 什么是JSON和XML 什么是JSON和XML JSON:JavaScript Object Notation [JavaScript 对象表示法]. XML:extens ...

  7. pygame写贪吃蛇

    python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...

  8. Sublime 远程连接 Linux服务器

    Sublime是一款强大的编辑器,它的强大体现在它强大的插件. 要实现Sublime 远程连接 Linux服务器,需要使用插件SFTP. 一. 插件安装 用Package Control安装插件按下C ...

  9. iOS字体名字

    上面我们提到我们需要设置字体集,在IOS系统中我们用到的字体包含一下几种 : Font Family: American Typewriter( AmericanTypewriter,American ...

  10. [原创]CentOS7安装远程工具teamviewer12

    系统环境:CentOS 7.0.1 1.下载安装# wget https://dl.tvcdn.de/download/version_12x/teamviewer_12.0.85001.i686.r ...