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

May 16, 2016 pm 04:42 PM
table Traverse

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
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Java how to loop through a folder and get all file names Java how to loop through a folder and get all file names Mar 29, 2024 pm 01:24 PM

Java is a popular programming language with powerful file handling capabilities. In Java, traversing a folder and getting all file names is a common operation, which can help us quickly locate and process files in a specific directory. This article will introduce how to implement a method of traversing a folder and getting all file names in Java, and provide specific code examples. 1. Use the recursive method to traverse the folder. We can use the recursive method to traverse the folder. The recursive method is a way of calling itself, which can effectively traverse the folder.

PHP glob() function usage example: traverse all files in a specified folder PHP glob() function usage example: traverse all files in a specified folder Jun 27, 2023 am 09:16 AM

Example of using PHPglob() function: Traverse all files in a specified folder In PHP development, it is often necessary to traverse all files in a specified folder to implement batch operation or reading of files. PHP's glob() function is used to achieve this requirement. The glob() function can obtain the path information of all files that meet the conditions in the specified folder by specifying a wildcard matching pattern. In this article, we will demonstrate how to use the glob() function to iterate through all files in a specified folder

In-depth comparison of Java Iterator and Iterable: pros and cons analysis In-depth comparison of Java Iterator and Iterable: pros and cons analysis Feb 19, 2024 pm 04:20 PM

Conceptual differences: Iterator: Iterator is an interface that represents an iterator that obtains values ​​from a collection. It provides methods such as MoveNext(), Current() and Reset(), allowing you to traverse the elements in the collection and operate on the current element. Iterable: Iterable is also an interface, representing an iterable object. It provides the Iterator() method, which returns an Iterator object to facilitate traversing the elements in the collection. Usage: Iterator: To use Iterator, you need to first obtain an Iterator object, and then call the MoveNext() method to move to the next

How to use the os module to traverse files in a directory in Python 3.x How to use the os module to traverse files in a directory in Python 3.x Jul 29, 2023 pm 02:57 PM

How to use the os module to traverse files in a directory in Python3.x In Python, we can use the os module to operate files and directories. The os module is an important module in the Python standard library, providing many operating system-related functions. In this article, we will explain how to use the os module to iterate through all files in a directory. First, we need to import the os module: importos Next, we can use the os.walk() function to walk the directory.

Recursively insert and traverse linked list in C++ Recursively insert and traverse linked list in C++ Sep 10, 2023 am 09:21 AM

We get the integer values ​​used to form the linked list. The task is to first insert and then traverse the singly linked list using recursive method. Add node recursively at the end if head is NULL → add node to head otherwise add to head (head → next) recursively traverse nodes if head is NULL → exit otherwise print (head → next) Example input −1-2-7-9 -10 output outputstrong>− linked list: 1→2→7→9→10→NULL input−12-21-17-94-18 output− linked list: 12→21→17→94→18→NULL used in the following program The method is as follows In this method, we will use the function to add nodes and traverse the singly linked list and pass

Java Iterator and Iterable: The key to collection traversal, demystified Java Iterator and Iterable: The key to collection traversal, demystified Feb 20, 2024 am 10:27 AM

Introduction to IteratorIterator is an interface in Java for traversing collections. It provides a set of methods that allow you to access elements in a collection in a sequential manner. You can use Iterator to iterate over collection types such as List, Set, and Map. Demo code: Listlist=newArrayList();list.add("one");list.add("two");list.add("three");Iteratoriterator=list.iterator();while(iter

How to implement binary tree traversal using Python How to implement binary tree traversal using Python Jun 09, 2023 pm 09:12 PM

As a commonly used data structure, binary trees are often used to store data, search and sort. Traversing a binary tree is one of the very common operations. As a simple and easy-to-use programming language, Python has many methods to implement binary tree traversal. This article will introduce how to use Python to implement pre-order, in-order and post-order traversal of a binary tree. Basics of Binary Trees Before learning how to traverse a binary tree, we need to understand the basic concepts of a binary tree. A binary tree consists of nodes, each node has a value and two child nodes (left child node and right child node

How to use vue3 table component How to use vue3 table component May 12, 2023 pm 09:40 PM

Basic table Before developing the table component, first think about what style of API to use. Because the author uses element in production work, the styles of the previous components are similar to element, but this time I do not plan to use the element style. , I plan to change it and display it directly: We expect users to use it like this: constdataList=[{id:1,name:'"JavaEE Enterprise Application Practice"',author:'dev1ce',price:'10.22',desc:&# 3

See all articles