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. Sonar 常用代码规则整理(二)

    摘要:公司部署了一套sonar,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分析,避免再次出现类似问题. 作者原创技术文章,转载请注明出处 ＝＝＝＝＝＝＝＝＝＝＝＝ ...

  2. 记录下直接在git里读取出差异并打包的代码

    一行命令: git diff --name-only HEAD commit_id | xargs tar -zcvf diff_head.tar.gz 这里的HEAD可以理解为最新的版本 HEAD本 ...

  3. MySQL计划任务(事件调度器)(Event Scheduler)[转]

    原文链接: http://www.cnblogs.com/c840136/articles/2388512.html MySQL5.1.x版本中引入了一项新特性EVENT,顾名思义就是事件.定时任务机 ...

  4. HDU 3032 Nim or not Nim? [Multi-SG]

    传送门 题意: nim游戏,多了一种操作:将一堆分成两堆 Multi-SG游戏规定,在符合拓扑原则的前提下,一个单一游戏的后继可以为多个单一游戏. 仍然可以使用$SG$函数,分成多个游戏的后继$SG$ ...

  5. 跨域资源请求（除jsonp以外）的方法

    ---------------------------------------------------------------------------------------------------- ...

  6. 阶段小项目2：显示bin格式图片

    #include<stdlib.h>#include<stdio.h>#include<string.h>#include<error.h>#inclu ...

  7. WPF DataTriger 用法示例代码

    用法1: <DataGridTemplateColumn Header="{lex:LocText ExamineRoom}"> <DataGridTemplat ...

  8. win7局域网共享文件

    调整共享文件所在电脑设置: 1. 关闭防火墙 2. 更改网络设置 ①打开网络和共享中心 ②进入"选择家庭组和共享选项" ③进入"更改高级共享设置" ④调整设置并 ...

  9. 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失

    问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...

  10. 开源项目-网上公开http代理爬取、简单分类

    爬取网上公开免费代理(http/socks),解析入库,可满足需要切换IP的场景(爬虫.投票等)需求. 项目地址: https://github.com/Jwnie/proxyservice 1.采用 ...