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 相关文章推荐
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP中list方法用法示例
2016/12/01 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
纯js简单日历实现代码
2013/10/05 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
js格式化时间的方法
2015/12/18 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python学习基础之循环import及import过程
2018/04/22 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
总结python中pass的作用
2019/02/27 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python自动下载图片的方法示例
2020/03/25 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
动员大会主持词
2014/03/20 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电