简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Javascript遍历Html Table示例(包括内容和属性值)_javascript技巧

WBOY
Lepaskan： 2016-05-16 16:42:10
asal
1529 orang telah melayarinya

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);
}
}
}
Salin selepas log masuk

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>
Salin selepas log masuk
Label berkaitan：
table 遍历
sumber：php.cn
Artikel sebelumnya：使用jquery prev()方法找到同级的前一个元素_jquery Artikel seterusnya：Javascript遍历table中的元素示例代码_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Apakah nombor prestasi di sebelah komponen dalam alat Vue dev? Adakah sesiapa mempunyai cerapan atau sumber untuk ciri tertentu dalam alat pembangunan Vu...
daripada 2023-11-09 14:46:48
0
1
305
MySQL - Tukar baris kepada lajur Saya cuba mencari siaran tetapi hanya menemui penyelesaian untuk SQLServer/Access. Saya me...
daripada 2023-10-13 11:50:31
0
1
232
Masalah menapis data daripada set data berdasarkan input pengguna Berikut ialah gambaran keseluruhan tentang perkara yang telah saya cuba setakat ini: Saya ...
daripada 2023-09-20 09:37:52
0
1
346
Ujian tidak membuang ralat apabila nilai yang dijangkakan berada di dalam gelung Saya cuba memfaktorkan semula beberapa ujian unit dan mendapati jangkaan di dalam gelung t...
daripada 2023-09-18 15:34:42
0
1
252
Mengapa kaedah peta tidak menunjukkan kandungan div saya? Saya sedang cuba mencipta aplikasi web menggunakan React yang menggesa pengguna memasukkan...
daripada 2023-09-16 20:00:13
0
1
268
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！