Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)

更新時(shí)間：2014年07月08日 17:39:01 投稿：whsnow

這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下

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狀態(tài)和其他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>

您可能感興趣的文章:

遍歷
Table

相關(guān)文章

JS實(shí)現(xiàn)單例模式的6種方案匯總
單例模式的定義是保證一個(gè)類僅有一個(gè)實(shí)例,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)單例模式的6種方案,需要的朋友可以參考下
2021-05-05
JS 排序輸出實(shí)現(xiàn)table行號(hào)自增前端動(dòng)態(tài)生成的tr
一個(gè)項(xiàng)目，需要對(duì)數(shù)據(jù)進(jìn)行排序輸出，要求有行號(hào)，依次遞增1.2.3.4.5，使用前端動(dòng)態(tài)生成的tr
2014-08-08
js Array操作的最簡(jiǎn)短最容易理解方法
這篇文章主要是對(duì)js中的Array操作進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼,可讀取當(dāng)前的完整時(shí)間并實(shí)時(shí)顯示,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
js實(shí)現(xiàn)簡(jiǎn)單圖片切換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
javascript實(shí)現(xiàn)數(shù)字+字母驗(yàn)證碼的簡(jiǎn)單實(shí)例
本篇文章只要是對(duì)javascript實(shí)現(xiàn)數(shù)字+字母驗(yàn)證碼的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
js統(tǒng)計(jì)頁面上每個(gè)標(biāo)簽的數(shù)量實(shí)例代碼
這篇文章通過實(shí)例代碼給大家講解了通過js統(tǒng)計(jì)頁面上每個(gè)標(biāo)簽的數(shù)量，代碼很簡(jiǎn)單，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了JS原生數(shù)據(jù)雙向綁定問題，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-08-08
axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能
這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)簡(jiǎn)單文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09