Heim > Web-Frontend > HTML-Tutorial > Wie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?

Wie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?

PHPz
Freigeben: 2023-09-16 17:57:07
nach vorne
1248 Leute haben es durchsucht

如何使用JavaScript DOM向表格添加行?

我们将学习如何使用JavaScript dom向表格中添加一行。为了实现这个目标,我们有多种方法。其中一些如下:

  • 使用 insertRow() 方法

  • 通过创建新元素

使用 insertRow() 方法

使用insertRow()方法可以在表格的开头插入新行。它创建一个新的元素并将其插入到表格中。它接受一个数字作为参数,指定表格的位置。如果我们不传递任何参数,则在表格的开头插入行。如果您想在表格的最后插入行,则将-1作为参数传递。

语法

table.insertRow(index)
Nach dem Login kopieren

返回值 − 被插入的元素。

正如我们所知,一个合适的表格不仅有表格行(),还有被称为表格单元格的表格文档()。为了在行内插入单元格,我们使用insertCell()方法。它在表格行内创建一个元素。它接受一个数字作为参数,指定该行内单元格的索引。

语法

下面是插入单元格的语法:

table.insertCell(index)
Nach dem Login kopieren

返回值 − 被插入的元素。

将一行添加到表格的步骤

  • 获取数据表元素。

  • 使用insertRow方法创建一行,并将其插入到表格中。

  • 使用insertCell方法创建新的单元格,并将其插入到您创建的行中。

  • 向新创建的单元格中添加数据。

Example

的翻译为:

示例

在此示例中,我们有一个包含学生姓名及其年龄的表。我们将在表格末尾添加一名新学生。

<!DOCTYPE html>
<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p> Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
      </thead>
      <tbody>
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table element in which you want to add row
      let table = document.getElementById("myTable");
   
      // Create a row using the inserRow() method and
      // specify the index where you want to add the row
      let row = table.insertRow(-1); // We are adding at the end
   
      // Create table cells
      let c1 = row.insertCell(0);
      let c2 = row.insertCell(1);
      let c3 = row.insertCell(2);
   
      // Add data to c1 and c2
      c1.innerText = "Elon"
      c2.innerText = 45
      c3.innerText = "Houston"
   }
</script>
</html>
Nach dem Login kopieren

通过创建新元素

在这种方法中,我们将使用document.createElement()方法创建新的行和列。

方法

以下是通过创建元素向表格添加行的步骤。

  • 获取要添加行的表体元素

  • 创建行元素

  • 创建单元格将数据插入单元格

  • 将单元格添加到行中

  • 追加行到表格主体

Example

的翻译为:

示例

<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p>Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
         <th> Course </th>
      </thead>
      <tbody id="tableBody">
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
            <td> Java </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
            <td> Python </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
            <td> JavaScript </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table body element in which you want to add row
      let table = document.getElementById("tableBody");
   
      // Create row element
      let row = document.createElement("tr")
      
      // Create cells
      let c1 = document.createElement("td")
      let c2 = document.createElement("td")
      let c3 = document.createElement("td")
      let c4 = document.createElement("td")
      
      // Insert data to cells
      c1.innerText = "Elon"
      c2.innerText = "42"
      c3.innerText = "Houston"
      c4.innerText = "C++"
      
      // Append cells to row
      row.appendChild(c1);
      row.appendChild(c2);
      row.appendChild(c3);
      row.appendChild(c4);
      
      // Append row to table body
      table.appendChild(row)
   }
</script>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von JavaScript DOM Zeilen zur Tabelle hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage