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 相关文章推荐
jQuery验证插件validation使用指南
Apr 21 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
domReady的实现案例
Nov 23 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Vue computed 计算属性代码实例
2020/04/22 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python装饰器实例大详解
2017/10/25 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
使用python实现名片管理系统
2020/06/18 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
创先争优宣传标语
2014/10/08 职场文书
庆祝儿童节标语
2014/10/09 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
总结几个非常实用的Python库
2021/06/26 Python