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 Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js+css实现导航效果实例
Feb 10 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
AngularJS指令用法详解
Nov 02 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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
在字符串中把网址改成超级链接
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Python实现手势识别
2020/10/21 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
法制宣传日活动总结
2014/04/29 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
工作推荐信模板
2015/03/25 职场文书