Gán động ID cho các nút trong hàng bảng bằng JavaScript

Tìm hiểu về việc tạo ID động cho các nút trong bảng JavaScript

Khi tạo động các phần tử HTML như bảng và nút bằng JavaScript, việc gán ID duy nhất cho các phần tử đó có thể là một thách thức. Điều này đặc biệt quan trọng khi mỗi hàng trong bảng cần một nút duy nhất để tương tác riêng biệt. Các nhà phát triển thường gặp phải vấn đề khi cố gắng gán ID động trong bên trongHTML của một tế bào.

Trong trường hợp này, mục tiêu là xây dựng các hàng trong bảng từ một đối tượng JSON và gán động một ID duy nhất cho nút trong mỗi hàng. Tuy nhiên, các cách tiếp cận phổ biến sử dụng chữ mẫu trong bên trongHTML có thể không hoạt động như mong đợi. Điều này có thể gây ra sự cố khi cố gắng tham chiếu hoặc tương tác với các nút đó sau này trong tập lệnh.

Vấn đề phát sinh từ cách xử lý JavaScript bên trongHTML và mẫu chữ. Nếu không có cách tiếp cận phù hợp, nút nhận dạng sẽ hiển thị không chính xác hoặc không cập nhật động, khiến không thể nhắm mục tiêu các hàng cụ thể cho hành động. Đây là một cạm bẫy phổ biến trong việc tạo bảng động.

Trong bài viết này, chúng ta sẽ khám phá cách giải quyết vấn đề này bằng cách gán chính xác ID động cho các nút trong ô bảng bằng phương pháp đảm bảo ID nút là duy nhất cho mỗi hàng. Chúng tôi cũng sẽ cung cấp giải pháp hiệu quả mà bạn có thể áp dụng trong các dự án của riêng mình.

Tạo hàng bảng động và ID nút trong JavaScript

Trong quá trình phát triển giao diện người dùng động, việc tạo ID duy nhất cho các thành phần HTML thường rất quan trọng để xử lý các tương tác của người dùng, đặc biệt trong các trường hợp cần phân biệt nhiều nút hoặc trường nhập. Các tập lệnh được thảo luận ở trên minh họa cách tạo động các hàng và nút của bảng, gán cho mỗi nút một ID duy nhất tương ứng với hàng của nó trong bảng. Bằng cách sử dụng vòng lặp JavaScript và nối chuỗi, chúng tôi có thể đảm bảo rằng mỗi nút có một mã định danh duy nhất, như "testbutton0", "testbutton1", v.v. Điều này cho phép dễ dàng xác định nút kích hoạt một sự kiện cụ thể, khiến nó trở thành một cách tiếp cận thực tế để tạo nội dung động.

Một trong những chức năng cốt lõi được sử dụng trong ví dụ này là bảng.insertRow(), chèn các hàng mới vào bảng HTML có sẵn. Đối với mỗi lần lặp của vòng lặp, một hàng mới sẽ được thêm vào bảng và trong hàng đó, chúng ta tạo hai ô: một ô cho tên nhân viên và một ô khác cho nút. Tế bào thứ hai sử dụng bên trongHTML để chèn nút và ID được tạo động của nó. Tuy nhiên, sử dụng bên trongHTML Việc tạo các phần tử có những hạn chế, đặc biệt khi liên quan đến các biến tham chiếu như ID nút, điều này sẽ dẫn đến lỗi nếu không được xử lý đúng cách.

Cách tiếp cận đáng tin cậy hơn được thể hiện trong giải pháp thứ hai sử dụng document.createElement() để tạo các phần tử HTML trực tiếp thông qua JavaScript. Phương pháp này cung cấp khả năng kiểm soát tốt hơn trong việc tạo các phần tử và cho phép mã mô-đun an toàn hơn, an toàn hơn. Bằng cách tạo các nút theo chương trình và gán ID động thông qua JavaScript, giải pháp này tránh được các sự cố tiềm ẩn do bên trongHTML và cung cấp một cách sạch hơn, an toàn hơn để tạo nội dung. Ngoài ra, việc thêm trình xử lý sự kiện trực tiếp vào các nút sẽ dễ dàng hơn bằng cách sử dụng addEventListener(), giúp tránh các trình xử lý sự kiện nội tuyến.

Cuối cùng, việc đưa vào sự kiện.target.id rất quan trọng để xác định nút nào đã được nhấp. Thuộc tính sự kiện này ghi lại ID của phần tử đã kích hoạt sự kiện, cho phép kiểm soát chính xác các tương tác. Ví dụ: khi một nút được nhấp vào, doSmth() chức năng cảnh báo ID của nút, giúp đảm bảo rằng hành động chính xác được thực hiện dựa trên nút cụ thể được nhấp vào. Sự kết hợp các kỹ thuật này—tạo hàng động, gán ID duy nhất và xử lý sự kiện—làm cho nó trở thành một giải pháp mạnh mẽ để xây dựng các bảng tương tác, dựa trên dữ liệu ở giao diện người dùng.

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>

Tăng cường việc tạo và tương tác ID động trong bảng JavaScript

Một khía cạnh thường bị bỏ qua khi tạo động nội dung bảng bằng JavaScript là khả năng mở rộng và bảo trì. Khi số lượng hàng trong bảng tăng lên, hiệu suất có thể bị ảnh hưởng, đặc biệt nếu DOM được cập nhật hoặc xây dựng lại liên tục. Để tối ưu hóa hiệu suất, bạn có thể giảm số lượng thao tác DOM trực tiếp bằng cách trước tiên xây dựng toàn bộ cấu trúc bảng trong bộ nhớ, sử dụng một đoạn tài liệu, trước khi thêm nó vào DOM. Điều này giảm thiểu quá trình chỉnh lại dòng và sơn lại, có thể làm chậm các ứng dụng quy mô lớn.

Một yếu tố quan trọng khác trong việc tạo bảng động là cách bạn xử lý việc ủy ​​quyền sự kiện. Mặc dù việc thêm trình xử lý sự kiện riêng lẻ vào từng nút hoạt động tốt đối với các bảng nhỏ hơn nhưng điều này có thể dẫn đến các vấn đề về hiệu suất với các tập dữ liệu lớn hơn. Thay vào đó, việc sử dụng ủy quyền sự kiện cho phép bạn lắng nghe các sự kiện trên phần tử gốc (như bảng) và xử lý các lần nhấp vào nút hiệu quả hơn. Bằng cách này, bạn chỉ đính kèm một trình xử lý sự kiện vào bảng và dựa trên ID của phần tử được nhấp vào, bạn có thể xác định hành động thích hợp cần thực hiện.

Cuối cùng, khả năng tiếp cận là một yếu tố khác không nên bỏ qua. Khi tạo động các nút hoặc các phần tử tương tác khác, điều cần thiết là phải đảm bảo rằng tất cả người dùng đều có thể truy cập từng phần tử, kể cả những người sử dụng công nghệ hỗ trợ. Bằng cách thêm thích hợp nhãn aria hoặc vai trò vào các nút, bạn có thể cung cấp trải nghiệm người dùng toàn diện hơn. Hơn nữa, việc kiểm tra bảng của bạn bằng trình đọc màn hình hoặc điều hướng bằng bàn phím có thể giúp phát hiện mọi vấn đề về cách các thành phần được tương tác trong một ứng dụng web năng động hơn, dễ truy cập hơn.