Javascript遍历Html Table示例(包括内容和属性值)


Posted in Javascript onJuly 08, 2014

1: 遍历并输出Table中值

<table id="tb">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
function f()
{
var t=document.getElementById("tb").childNodes.item(0);
for(var i=0;i< t.childNodes.length;i++)
{
for(var j=0;j<t.childNodes(i).childNodes.length;j++)
{
alert(t.childNodes(i).childNodes(j).innerText);
}
}
}

2: 遍历Table,读取CheckBox状态和其他Column值

<!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> <title>Untitled Page</title> </head> <body onload="f()"> 
<script type="text/javascript"> 
function f()
{
var t=document.getElementById("tb").childNodes.item(0);

for(var i=0;i< t.childNodes.length;i++)
{
alert(t.childNodes(i).firstChild.firstChild.nodeValue);
alert(t.childNodes(i).childNodes[1].firstChild.checked); 
}
}

</script>

<table id="tb">
<tr>
<td style="width: 122px">
1234</td>
<td style="width: 89px">
<input type="checkbox" /></td>
<td style="width: 210px">
</td>
</tr>
<tr>
<td style="width: 122px; height: 21px">
2234</td>
<td style="width: 89px; height: 21px">
<input type="checkbox" checked="CHECKED" /></td>
<td style="width: 210px; height: 21px">
</td>
</tr>
<tr>
<td style="width: 122px">
3234</td>
<td style="width: 89px">
<input type="checkbox" /></td>
<td style="width: 210px">
</td>
</tr>
</table>
</body>
</html>
Javascript 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 #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
You might like
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
使用js画图之画切线
2015/01/12 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python操作json的方法实例分析
2018/12/06 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
市场部规章制度
2014/01/24 职场文书
审计班子对照检查材料
2014/08/27 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年党建工作总结
2015/03/30 职场文书
加班费申请报告
2015/05/15 职场文书