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


Posted in Javascript onJuly 08, 2014

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)初始化时

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

(2)单击“遍历”

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

(3)再次单击“遍历”

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

Javascript 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 #Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 #Javascript
bootstrap data与jquery .data
Jul 07 #Javascript
函数式 JavaScript(一)简介
Jul 07 #Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
如何快速上手Vuex
2017/02/14 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue.use源码分析
2017/04/22 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python视频按帧截取图片工具
2019/07/23 Python
python flask中动态URL规则详解
2019/11/22 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Internet体系结构
2014/12/21 面试题
历史系毕业生自荐信
2013/10/28 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android