JavaScript遍历table表格中的某行某列并打印其值
更新时间：2014年07月08日 17:32:43 投稿：whsnow
这篇文章主要介绍了JavaScript遍历table表格中的某行某列并打印其值,需要的朋友可以参考下
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异步编程，其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题，感兴趣的小伙伴们可以参考一下2016-02-02
下面小编就为大家带来一篇限制复选框最多选择项的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了Bootstrap导航条的使用方法第二篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了微信小程序自定义模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了微信小程序中选中手机相册图片上传到服务器的步骤,现图片上传我们需要使用chooseImg和uploadFile这两个api,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-04-04
这篇文章主要给大家总结介绍了关于在JS中如何轻松遍历对象属性的方式，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下2019-01-01
扩展运算符（ spread ）是三个点（...）,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,这篇文章主要给大家介绍了关于ES6扩展运算符的理解与使用场景的相关资料,需要的朋友可以参考下2021-09-09
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
本文给大家介绍Bootstrap3.0建站教程(一)之bootstrap表单元素排版，本文给大家列举了文字和输入框前后排列和上下排列的实例代码，有需要的朋友参考下吧2016-06-06
最新评论