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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
一个简单的全屏图片上下打开显示网页效果示例
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安全配置详细说明
2011/09/26 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP插入排序实现代码
2013/04/04 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP类的特性实例分析
2016/09/28 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
基于Vue生产环境部署详解
2017/09/15 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
python之import机制详解
2014/07/03 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
举例讲解Python装饰器
2020/12/24 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
土木工程毕业生推荐信
2013/10/28 职场文书
销售活动策划方案
2014/08/26 职场文书
环卫个人总结
2015/03/03 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript