Bagaimana untuk memasukkan id secara dinamik ke dalam elemen jadual menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk memasukkan id secara dinamik ke dalam elemen jadual menggunakan JavaScript?

王林

Lepaskan： 2023-08-24 23:57:02

ke hadapan

1050 orang telah melayarinya

如何使用 JavaScript 动态地将 id 插入到表元素中？

Dalam artikel ini, kita akan belajar cara memasukkan ID secara dinamik ke dalam elemen jadual menggunakan JavaScript dengan bantuan setAttribute API.

Dalam pembangunan web, memasukkan ID secara dinamik ke dalam elemen jadual HTML boleh menjadi teknik yang berguna apabila kita perlu mengenal pasti dan memanipulasi baris atau sel tertentu secara unik. Dengan memberikan ID secara pemrograman kepada elemen jadual, kami memperoleh lebih kawalan dan fleksibiliti dalam mengakses dan mengubah suai kandungan jadual.

Mari kita lihat beberapa contoh untuk memahami cara mencapai matlamat ini.

Contoh 1

Dalam contoh ini, kami menjana ID rawak untuk baris jadual dengan mengira jumlah bilangan baris yang tersedia dan menambahkan kiraan itu pada rentetan kosong.

Nama fail: index.html

<html lang="en">
   <head>
      <title>How to dynamically insert id into table element using JavaScript?</title>
   </head>
   <body>
      <h3>How to dynamically insert id into table element using JavaScript?</h3>
      <table id="myTable">
         <tr>
            <th>Row</th>
            <th>Data</th>
         </tr>
      </table>
      <button onclick="addRow()">Add Row</button>
      <script>
         function addRow() {
            const table = document.getElementById("myTable");
            const row = table.insertRow();
            const rowId = "" + (table.rows.length - 1); // Generate a unique ID
            row.id = rowId; // Set the ID of the row

            // Add cells to the new row
            const cell1 = row.insertCell(0);
            const cell2 = row.insertCell(1);

            // Insert content into cells
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh ini, kami akan mengikuti corak kod di atas dan menjana id rawak untuk sel jadual menggunakan 3 kaedah berbeza dengan bantuan kaedah classList, objek classList dan sifat id bagi objek dataset. < /p>

Nama fail: index.html

<html lang="en">
   <head>
      <title>
         How to dynamically insert id into table element using JavaScript?
      </title>
   </head>
   <body>
      <h3>How to dynamically insert id into table element using JavaScript?</h3>
      <table id="myTable">
         <tr>
            <th>Row</th>
            <th>Data</th>
         </tr>
      </table>
      <button onclick="addRowUsingObj()">Add Row Using classList object</button>
      <button onclick="addRowUsingMethod()">
         Add Row Using classList method
      </button>
      <button onclick="addRowUsingId()">Add Row Using the id property</button>
      <script>
         const table = document.getElementById("myTable");

         function addRowUsingObj() {
            // Example 1: Using classList object
            const row1 = table.insertRow();
            row1.classList.add("custom-row");

            // Insert content into cells
            const cell1 = row1.insertCell();
            const cell2 = row1.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }
 
         function addRowUsingMethod() {
            // Example 2: Using classList method
            const row3 = table.insertRow();
            row3.classList.add("row-highlight");

            // Insert content into cells
            const cell1 = row3.insertCell();
            const cell2 = row3.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }

         function addRowUsingId() {
            // Example 3: Using the id property of the dataset object
            const row4 = table.insertRow();
            const rowId = "row-" + (table.rows.length - 1); // Generate a unique ID
            row4.dataset.id = rowId; // Set the ID of the row

            // Insert content into cells
            const cell1 = row4.insertCell();
            const cell2 = row4.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
            // Add more cells and content for the other examples if needed
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Ringkasnya, menggunakan JavaScript untuk memasukkan ID secara dinamik ke dalam elemen jadual membolehkan manipulasi dan interaksi yang cekap dengan elemen tertentu dalam jadual. Dalam contoh yang disediakan, kami mempelajari cara memasukkan ID secara dinamik ke dalam baris dan sel jadual. Dengan memanfaatkan kaedah JavaScript seperti insertRow, insertCell, dsb. dan memanipulasi atribut id, kami menjana ID unik dan mengaitkannya dengan elemen jadual yang sepadan.

Atas ialah kandungan terperinci Bagaimana untuk memasukkan id secara dinamik ke dalam elemen jadual menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!