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）再次单击“遍历”
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了LayUI+Shiro实现动态菜单并记住菜单收展的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
javascript 如何生成不重复的随机数...2007-11-11
这篇文章主要介绍了使用javascript实现数据格式化为字符串，非常的实用，这里推荐给有相同需求的小伙伴。2014-12-12
这篇文章主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了原生js实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家带来一篇改变checkbox默认选中状态及取值的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
Bootstrap~多级导航(级联导航)的实现效果【附代码】
下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧2016-03-03
PC端项目中经常会出现大量的数据列表页面，涉及到下拉框选择筛选条件；当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢？下面通过本文给大家介绍下，需要的的朋友参考下吧2017-06-06
这篇文章主要介绍了JS实现控制表格内指定单元格内容对齐的方法,涉及javascript操作表格单元格内容样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript页面回流与重绘,一个html页面是一个整体，当这个整体中的某一个部分发生改变，那么这个页面整体会重新进行渲染，而如果我们采用添加标签的方式，每次添加一个标签，就会让每一次页面都重新渲染，性能急剧下降,下面来看看具体内容吧2022-01-01
最新评论