Menetapkan ID secara dinamik pada Butang dalam Baris Jadual Menggunakan JavaScript

Memahami Penjanaan ID Dinamik untuk Butang dalam Jadual JavaScript

Apabila menjana elemen HTML seperti jadual dan butang secara dinamik menggunakan JavaScript, memberikan ID unik kepada elemen tersebut boleh menjadi satu cabaran. Ini amat penting apabila setiap baris dalam jadual memerlukan butang unik untuk interaksi berasingan. Pembangun sering menghadapi masalah apabila cuba memberikan ID dinamik dalam innerHTML daripada sel.

Dalam kes ini, matlamatnya adalah untuk membina baris jadual daripada objek JSON dan secara dinamik memberikan ID unik kepada butang dalam setiap baris. Walau bagaimanapun, pendekatan biasa menggunakan literal templat dalam innerHTML mungkin tidak berfungsi seperti yang diharapkan. Ini boleh menyebabkan masalah apabila cuba merujuk atau berinteraksi dengan butang tersebut kemudian dalam skrip.

Masalah timbul daripada cara JavaScript memproses innerHTML dan literal templat. Tanpa pendekatan yang betul, butang itu id akan dipaparkan secara tidak betul atau gagal untuk mengemas kini secara dinamik, menjadikannya mustahil untuk menyasarkan baris tertentu untuk tindakan. Ini adalah perangkap biasa dalam penjanaan jadual dinamik.

Dalam artikel ini, kami akan meneroka cara menyelesaikan isu ini dengan memberikan ID dinamik dengan betul kepada butang dalam sel jadual menggunakan kaedah yang memastikan ID butang adalah unik untuk setiap baris. Kami juga akan menyediakan penyelesaian yang berkesan yang boleh anda gunakan dalam projek anda sendiri.

Barisan Jadual Dinamik dan Penjanaan ID Butang dalam JavaScript

Dalam pembangunan bahagian hadapan yang dinamik, menjana ID unik untuk elemen HTML selalunya penting untuk mengendalikan interaksi pengguna, terutamanya dalam senario di mana berbilang butang atau medan input perlu dibezakan. Skrip yang dibincangkan di atas menunjukkan cara membuat baris dan butang jadual secara dinamik, memberikan setiap butang ID unik yang sepadan dengan barisnya dalam jadual. Dengan menggunakan gelung JavaScript dan penggabungan rentetan, kami boleh memastikan bahawa setiap butang mempunyai pengecam unik, seperti "testbutton0", "testbutton1", dan sebagainya. Ini membolehkan pengecaman mudah bagi butang yang mencetuskan peristiwa tertentu, menjadikannya pendekatan praktikal untuk penjanaan kandungan dinamik.

Salah satu fungsi teras yang digunakan dalam contoh ini ialah table.insertRow(), yang memasukkan baris baharu ke dalam jadual HTML yang sedia ada. Untuk setiap lelaran gelung, baris baharu ditambahkan pada jadual, dan dalam baris itu, kami mencipta dua sel: satu untuk nama pekerja dan satu lagi untuk butang. Sel kedua menggunakan innerHTML untuk memasukkan butang dan ID yang dijana secara dinamik. Walau bagaimanapun, menggunakan innerHTML untuk mencipta elemen mempunyai hadnya, terutamanya apabila merujuk kepada pembolehubah seperti ID butang, yang membawa kepada ralat jika tidak dikendalikan dengan betul.

Pendekatan yang lebih dipercayai yang ditunjukkan dalam penggunaan penyelesaian kedua document.createElement() untuk mencipta elemen HTML secara langsung melalui JavaScript. Kaedah ini memberikan kawalan yang lebih baik ke atas penciptaan elemen dan membolehkan kod modular yang lebih selamat. Dengan mencipta butang secara pengaturcaraan dan memberikan ID secara dinamik melalui JavaScript, penyelesaian ini mengelakkan potensi isu yang disebabkan oleh innerHTML dan menyediakan cara yang lebih bersih dan selamat untuk menjana kandungan. Selain itu, ia memudahkan untuk menambah pendengar acara terus ke butang yang digunakan addEventListener(), yang membantu mengelakkan pengendali acara sebaris.

Akhir sekali, kemasukan daripada event.target.id adalah penting untuk mengenal pasti butang yang telah diklik. Sifat peristiwa ini menangkap ID elemen yang mencetuskan peristiwa, membenarkan kawalan tepat ke atas interaksi. Sebagai contoh, apabila butang diklik, butang doSmth() fungsi memberitahu ID butang, yang membantu memastikan tindakan yang betul diambil berdasarkan butang tertentu yang diklik. Gabungan teknik ini—penciptaan baris dinamik, tugasan ID unik dan pengendalian acara—menjadikannya penyelesaian yang berkuasa untuk membina jadual interaktif dipacu data di bahagian hadapan.

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

Meningkatkan Penjanaan ID Dinamik dan Interaksi dalam Jadual JavaScript

Satu aspek yang sering diabaikan apabila menjana kandungan jadual secara dinamik dengan JavaScript ialah potensi untuk berskala dan kebolehselenggaraan. Apabila bilangan baris jadual meningkat, prestasi boleh terjejas, terutamanya jika DOM sentiasa dikemas kini atau dibina semula. Untuk mengoptimumkan prestasi, anda boleh mengurangkan bilangan manipulasi DOM langsung dengan membina keseluruhan struktur jadual dalam ingatan terlebih dahulu, menggunakan serpihan dokumen, sebelum menambahkannya pada DOM. Ini meminimumkan proses pengaliran semula dan mengecat semula, yang boleh melambatkan aplikasi berskala besar.

Satu lagi elemen kritikal dalam penjanaan jadual dinamik ialah cara anda mengendalikan delegasi acara. Walaupun menambahkan pendengar acara individu pada setiap butang berfungsi dengan baik untuk jadual yang lebih kecil, ia boleh membawa kepada isu prestasi dengan set data yang lebih besar. Sebaliknya, menggunakan perwakilan acara membolehkan anda mendengar acara pada elemen induk (seperti jadual) dan memproses klik butang dengan lebih cekap. Dengan cara ini, anda melampirkan hanya satu pendengar acara pada jadual dan berdasarkan ID elemen yang diklik, anda boleh menentukan tindakan yang sesuai untuk diambil.

Akhir sekali, kebolehcapaian adalah satu lagi faktor yang tidak boleh diabaikan. Apabila menjana butang secara dinamik atau elemen interaktif lain, adalah penting untuk memastikan setiap elemen boleh diakses oleh semua pengguna, termasuk yang menggunakan teknologi bantuan. Dengan menambah yang sesuai aria-labels atau peranan kepada butang, anda boleh memberikan pengalaman pengguna yang lebih inklusif. Tambahan pula, menguji jadual anda dengan pembaca skrin atau navigasi papan kekunci boleh membantu mendedahkan sebarang isu tentang cara elemen berinteraksi dalam aplikasi web yang lebih dinamik dan boleh diakses.