How to get tr in javascript

In JavaScript, we often need to obtain specific elements in the HTML page, including the element in the table. Getting the elements is very important because they are often used to display data and are one of the most commonly used HTML elements in web pages. This article will introduce how to use JavaScript to obtain the element and related techniques.

Generally speaking, we can use the following method to get the element in the HTML table:

1. Get the element by ID:

If the table has an ID attribute, then we can use the document.getElementById() method to get the element. The following is a sample code:

<table id="myTable">
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.getElementById("myTable").rows[0];
console.log(firstRow);
</script>

In this example, we use the document.getElementById() method to get the table element with the ID attribute "myTable". We then access the rows in the table using the .rows[] array and store the first row in the firstRow variable. Finally, when we output firstRow in the console, we should see a element.

2. Get elements by class name:

If some rows in the table have the same class name, we can use the document.getElementsByClassName() method Get the elements for these rows. The following is a sample code:

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.getElementsByClassName("row-one");
console.log(rowOnes);
</script>

In this example, we have used the document.getElementsByClassName() method to get all elements with class name "row-one" and store them in rowOnes in variables. Finally, when we output rowOnes to the console, we should see two elements (the first and third rows).

3. Get the element by element type:

We can also get the element in the table through the document.getElementsByTagName() method. The following is a sample code:

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const rows = document.getElementsByTagName("tr");
console.log(rows);
</script>

In this example, we use the document.getElementsByTagName() method to get all the elements in the table and store them in the rows variable. Finally, when we output rows in the console, we should see three elements.

In addition to the above methods, we can also use the following techniques to obtain the element:

4. Using the querySelector() method:

We can Use the querySelector() method to select a single element based on a CSS selector. The following is a sample code:

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.querySelector("tr");
console.log(firstRow);
</script>

In this example, we use the querySelector() method to select the first element in the table and store it in the firstRow variable. Finally, we output firstRow in the console and we should see the first row.

5. Use querySelectorAll() method:

We can also use querySelectorAll() method to select multiple elements based on CSS selectors. The following is a sample code:

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.querySelectorAll(".row-one");
console.log(rowOnes);
</script>

In this example, we use the querySelectorAll() method to select all elements with the class name "row-one" in the table and store them in rowOnes in variables. Finally, when we output rowOnes to the console, we should see two elements (the first and third rows).

Summary:

It is not difficult to get the element in JavaScript. We can use the document.getElementById() method, document.getElementsByClassName() method, document.getElementsByTagName() method , querySelector() method and querySelectorAll() method are easily available. Which method to choose depends on which elements we want to get and where they are in the HTML document. Through these technologies, we can easily manipulate tables and dynamically display data on web pages.

The above is the detailed content of How to get tr in javascript. For more information, please follow other related articles on the PHP Chinese website!