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中将函数赋值给变量的调用方法
Mar 23 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
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
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JavaScript中的冒泡排序法
2016/08/03 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
微信小程序中的swiper组件详解
2017/04/14 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
Python中的包和模块实例
2014/11/22 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python url 参数修改方法
2018/12/26 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python字符串的修改方法实例
2019/12/19 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
python re模块和正则表达式
2021/03/24 Python
高级工程师英文求职信
2014/03/19 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android