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对象模型-执行模型
Apr 28 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
vue的toast弹窗组件实例详解
May 14 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript的==运算详解
2016/07/20 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JSON对象转化为字符串详解
2017/08/11 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python制作websocket服务器实例分享
2016/11/20 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python中reader的next用法
2018/07/24 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
基于python plotly交互式图表大全
2019/12/07 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
专科文秘应届生求职信
2013/11/18 职场文书
学习委员自我鉴定
2014/01/13 职场文书
申报优秀教师材料
2014/12/16 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫