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 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
php smarty模版引擎中的缓存应用
2009/12/11 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python 类详解及简单实例
2017/03/24 Python
python pyheatmap包绘制热力图
2018/11/09 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
人力资源经理的岗位职责范本
2014/02/28 职场文书
质检员岗位职责
2015/02/03 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Vue h函数的使用详解
2022/02/18 Vue.js
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS