Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?-html tutorial-php.cn

Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?

PHPz

Lepaskan： 2023-09-16 17:57:07

ke hadapan

1247 orang telah melayarinya

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

Kami akan belajar cara menambah baris pada jadual menggunakan JavaScript dom. Untuk mencapai matlamat ini, kami mempunyai beberapa kaedah. Antaranya adalah seperti berikut:

Gunakan kaedah insertRow()
Dengan mencipta elemen baharu

Gunakan kaedah insertRow()

Gunakan kaedah insertRow() untuk memasukkan baris baharu pada permulaan jadual. Ia mencipta elemen baharu dan memasukkannya ke dalam jadual. Ia menerima nombor sebagai parameter, menentukan kedudukan jadual. Jika kita tidak melepasi sebarang parameter, baris akan dimasukkan pada permulaan jadual. Jika anda ingin memasukkan baris di hujung jadual, lulus -1 sebagai parameter.

Tatabahasa

table.insertRow(index)

Salin selepas log masuk

Nilai pulangan − Elemen yang dimasukkan.

Seperti yang kita ketahui, jadual yang betul bukan sahaja mempunyai baris jadual (), tetapi juga dokumen jadual yang dipanggil sel jadual (). Untuk memasukkan sel dalam satu baris, kami menggunakan kaedah insertCell(). Ia mencipta elemen dalam baris jadual. Ia menerima nombor sebagai hujah, menentukan indeks sel dalam baris.

Tatabahasa

Berikut ialah sintaks untuk memasukkan sel:

table.insertCell(index)

Salin selepas log masuk

Nilai pulangan − Elemen yang dimasukkan.

Langkah untuk menambah baris pada jadual

Dapatkan elemen jadual data.
Gunakan kaedah insertRow untuk mencipta baris dan memasukkannya ke dalam jadual.
Gunakan kaedah insertCell untuk mencipta sel baharu dan masukkannya ke dalam baris yang anda buat.
Tambah data pada sel yang baru dibuat.

Contoh

diterjemahkan sebagai:

Contoh

Dalam contoh ini, kami mempunyai jadual yang mengandungi nama pelajar dan umur mereka. Kami akan menambah pelajar baharu di hujung jadual.

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

Salin selepas log masuk

Dengan mencipta elemen baharu

Dalam kaedah ini kita akan mencipta baris dan lajur baharu menggunakan kaedah document.createElement().

Kaedah

Berikut ialah langkah untuk menambah baris pada jadual dengan mencipta elemen.

Dapatkan elemen badan jadual untuk menambah baris
Buat elemen baris
Buat sel dan masukkan data ke dalam sel
Tambahkan sel pada baris
Tambahkan baris pada badan meja

Contoh

diterjemahkan sebagai:

Contoh

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!