Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Javascript traversal Html Table example (including content and attribute values)_javascript skills

Javascript traversal Html Table example (including content and attribute values)_javascript skills

WBOY
Release： 2016-05-16 16:42:10
Original
1605 people have browsed it

1: Traverse and output the values ​​in 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);
}
}
}
Copy after login

2: Traverse Table, read CheckBox status and other Column values

<!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>
Copy after login
Related labels：
table Traverse
source：php.cn
Previous article：Use jquery prev() method to find the previous element of the same level_jquery Next article：Javascript traverses elements in table sample code_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...
From 2024-04-06 17:27:56
0
1
406
Retrieve payment method history for WooCommerce customers I found a script that helps me get the information I need: the payment methods a customer ...
From 2024-04-04 14:57:11
0
1
428
Assign classes to most recently clicked element I have a calendar that looks like this, styled using TailwindCSS: 8Wednesday is currently ...
From 2024-04-03 16:36:09
0
1
336
Unable to receive information from my mySQL database despite having seen tutorials doing the exact same thing So I'm trying to make a program that reads and writes to a MySQL database, which led me to...
From 2024-04-03 14:46:04
0
1
298
How to search title and use another column to check uniqueness I have some scraped product data in the database and I want to use it on my website. I wan...
From 2024-04-02 21:49:55
0
1
375
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template