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的三级展开列表
Apr 26 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
vue移动端下拉刷新和上滑加载
Oct 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
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
node.js实现端口转发
2016/04/14 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
新电JAVA笔试题目
2014/08/31 面试题
如何理解委托
2012/01/06 面试题
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
大学生求职推荐信
2013/11/27 职场文书
给同事的道歉信
2014/01/11 职场文书
企业法人授权委托书
2014/09/25 职场文书
整改报告怎么写
2014/11/06 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
golang slice元素去重操作
2021/04/30 Golang
java设计模式--建造者模式详解
2021/07/21 Java/Android