Chèn cột JavaScript

Bài viết này là tổng quan về một số phương thức DOM cấp 1 mạnh mẽ, cơ bản và cách sử dụng chúng từ JavaScript. Bạn sẽ tìm hiểu cách tạo, truy cập, kiểm soát và xóa các phần tử HTML một cách linh hoạt. Các phương thức DOM được trình bày ở đây không dành riêng cho HTML; . Các minh họa được cung cấp ở đây sẽ hoạt động tốt trong mọi trình duyệt hiện đại

Ghi chú. Các phương thức DOM được trình bày ở đây là một phần của đặc tả cấp 1 Mô hình Đối tượng Tài liệu (Lõi). DOM cấp 1 bao gồm cả các phương thức để truy cập và thao tác tài liệu chung (DOM 1 Core) cũng như các phương thức dành riêng cho tài liệu HTML (DOM 1 HTML)

Tạo một bảng HTML động

Thí dụ

Trong ví dụ này, chúng tôi thêm một bảng mới vào trang khi nhấp vào nút

HTML

<input type="button" value="Generate a table" onclick="generateTable()" />

JavaScript

function generateTable() {
  // creates a  element and a  elementconst tbl = document.createElement("table");const tblBody = document.createElement("tbody");// creating all cellsfor(let i =0; i <2; i++){// creates a table rowconst row = document.createElement("tr");for(let j =0; j <2; j++){// Create a  in the 
element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
tbl.appendChild(tblBody);// appends
into document.body.appendChild(tbl);// sets the border attribute of tbl to '2' tbl.setAttribute("border","2");}

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}

Kết quả

Giải trình

Lưu ý thứ tự mà chúng tôi đã tạo các phần tử và nút văn bản

  1. Đầu tiên chúng ta tạo phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3
  2. Tiếp theo, chúng tôi đã tạo phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4, là phần tử con của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3
  3. Tiếp theo, chúng tôi đã sử dụng một vòng lặp để tạo các phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6, là phần tử con của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4
  4. Đối với mỗi phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6, chúng tôi đã sử dụng một vòng lặp để tạo các phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9, là phần tử con của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6
  5. Đối với mỗi phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9, sau đó chúng tôi đã tạo nút văn bản bằng văn bản của ô bảng

Khi chúng tôi đã tạo các phần tử

table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
3,
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
4,
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
6 và
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
9, sau đó là nút văn bản, chúng tôi sẽ nối từng đối tượng vào phần tử gốc của nó theo thứ tự ngược lại

  1. Đầu tiên, chúng tôi đính kèm từng nút văn bản vào phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9 gốc của nó bằng cách sử dụng

    function generateTable() {
      // creates a 
element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
tbl.appendChild(tblBody); // appends
into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 7

  • Tiếp theo, chúng tôi đính kèm từng phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9 vào phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6 gốc của nó bằng cách sử dụng

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    0

  • Tiếp theo, chúng tôi đính kèm từng phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6 vào phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4 gốc bằng cách sử dụng

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3

  • Tiếp theo, chúng tôi đính kèm phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4 vào phần tử mẹ
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3 của nó bằng cách sử dụng

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6

  • Tiếp theo, chúng tôi đính kèm phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3 vào phần tử mẹ
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    04 của nó bằng cách sử dụng

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9

  • Ghi nhớ kỹ thuật này. Bạn sẽ sử dụng nó thường xuyên trong lập trình cho W3C DOM. Đầu tiên, bạn tạo các phần tử từ trên xuống;

    Đây là đánh dấu HTML được tạo bởi mã JavaScript

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    0

    Đây là cây đối tượng DOM được tạo bởi mã cho phần tử

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3 và các phần tử con của nó

    Chèn cột JavaScript

    Bạn có thể xây dựng bảng này và các phần tử con bên trong của nó bằng cách chỉ sử dụng một vài phương thức DOM. Hãy nhớ ghi nhớ mô hình cây cho các cấu trúc bạn định tạo; . Trong cây

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3 của Hình 1, phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    3 có một con. phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4.
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4 có hai con. Mỗi đứa con của
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    4 (
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    6) có hai con (
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9). Cuối cùng, mỗi
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    9 có một con. một nút văn bản

    Đặt màu nền cho đoạn văn

    Thí dụ

    Trong ví dụ này, chúng tôi thay đổi màu nền của đoạn văn khi nhấp vào nút

    HTML

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    0

    JavaScript

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 0

    Kết quả

    Giải trình

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    34 là một phương thức có sẵn trong bất kỳ phần tử DOM
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    35 hoặc phần tử gốc
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    36 nào. Khi được gọi, nó trả về một mảng với tất cả các phần tử con của phần tử khớp với tên thẻ. Phần tử đầu tiên của danh sách nằm ở vị trí
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    37 trong mảng

    Chúng tôi đã thực hiện các bước sau

    1. Đầu tiên, chúng tôi lấy tất cả các phần tử
      table {
        margin: 1rem auto;
      }
      
      td {
        padding: 0.5rem;
      }
      
      38 trong tài liệu

      function generateTable() {
        // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 1

  • Sau đó, chúng tôi lấy phần tử đoạn thứ hai từ danh sách các phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    38

    function generateTable() {
      // creates a 
  • element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 2

    Chèn cột JavaScript
  • Cuối cùng, chúng tôi đặt màu nền thành màu đỏ bằng cách sử dụng thuộc tính
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    60 của đối tượng
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    61

    function generateTable() {
      // creates a 
  • element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 3

    Tạo TextNode bằng tài liệu. createTextNode(". ")

    Sử dụng đối tượng tài liệu để gọi phương thức

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    62 và tạo nút văn bản của bạn. Bạn chỉ cần chuyển nội dung văn bản. Giá trị trả về là một đối tượng đại diện cho nút văn bản

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 4

    Điều này có nghĩa là bạn đã tạo một nút kiểu

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    63 (một đoạn văn bản) có dữ liệu văn bản là
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    64 và
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    65 là tham chiếu của bạn tới đối tượng nút này. Để chèn văn bản này vào trang HTML của bạn, bạn cần biến nút văn bản này thành nút con của một số phần tử nút khác

    Chèn các phần tử với appendChild(. )

    Vì vậy, bằng cách gọi

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    66, bạn đang tạo phần tử con mới của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    67 thứ hai

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 5

    Sau khi kiểm tra mẫu này, lưu ý rằng các từ xin chào và thế giới ở cùng nhau. Chào thế giới. Vì vậy, về mặt trực quan, khi bạn nhìn thấy trang HTML, có vẻ như hai nút văn bản xin chào và thế giới là một nút duy nhất, nhưng hãy nhớ rằng trong mô hình tài liệu, có hai nút. Nút thứ hai là một nút mới thuộc loại

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    63 và nó là nút con thứ hai của thẻ
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    67 thứ hai. Hình dưới đây cho thấy đối tượng Nút văn bản được tạo gần đây bên trong cây tài liệu

    Chèn cột JavaScript

    Ghi chú.

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    90 và
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    91 là một cách đơn giản để bao gồm khoảng trắng giữa các từ xin chào và thế giới. Một lưu ý quan trọng khác là phương thức
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    92 sẽ thêm phần tử con vào sau phần tử con cuối cùng, giống như từ world đã được thêm vào sau từ hello. Vì vậy, nếu bạn muốn nối một Nút văn bản giữa hello và world, bạn sẽ cần sử dụng
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    93 thay vì
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    92

    Tạo các phần tử mới với đối tượng tài liệu và createElement(. ) phương pháp

    Bạn có thể tạo các phần tử HTML mới hoặc bất kỳ phần tử nào khác mà bạn muốn với

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    95. Ví dụ: nếu bạn muốn tạo phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    67 mới làm phần tử con của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    04, bạn có thể sử dụng phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    98 trong ví dụ trước và nối thêm một nút phần tử mới. Để tạo một nút gọi
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    99. Ví dụ

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 6

    Chèn cột JavaScript

    Loại bỏ các nút bằng removeChild(. ) phương pháp

    Các nút có thể được gỡ bỏ. Đoạn mã sau xóa nút văn bản

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    65 (chứa từ "thế giới") khỏi phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    67 thứ hai,
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    02

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 7

    Nút văn bản

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    65 (chứa từ "thế giới") vẫn tồn tại. Đoạn mã sau đính kèm
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    65 vào phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    67 được tạo gần đây,
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    06

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 8

    Trạng thái cuối cùng cho cây đối tượng đã sửa đổi trông như thế này

    Chèn cột JavaScript

    Tạo bảng động (quay lại Sample1. html)

    Trong phần còn lại của bài viết này, chúng tôi sẽ tiếp tục làm việc với sample1. html. Hình dưới đây cho thấy cấu trúc cây đối tượng bảng cho bảng được tạo trong mẫu

    Xem lại cấu trúc Bảng HTML

    Chèn cột JavaScript

    Tạo các nút phần tử và chèn chúng vào cây tài liệu

    Các bước cơ bản để tạo bảng trong sample1. html là

    • Lấy đối tượng body (mục đầu tiên của đối tượng tài liệu)
    • Tạo tất cả các yếu tố
    • Cuối cùng, nối từng con theo cấu trúc bảng (như hình trên). Mã nguồn sau đây là phiên bản nhận xét cho sample1. html

    Ghi chú. Ở cuối hàm

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    07, có một dòng mã mới. Thuộc tính
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    08 của bảng được đặt bằng một phương thức DOM khác,
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    09.
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    09 có hai đối số. tên thuộc tính và giá trị thuộc tính. Bạn có thể đặt bất kỳ thuộc tính nào của bất kỳ phần tử nào bằng phương thức
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    01

    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 9

    Thao tác với bảng bằng DOM và CSS

    Lấy một nút văn bản từ bảng

    Ví dụ này giới thiệu hai thuộc tính DOM mới. Đầu tiên nó sử dụng thuộc tính

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    02 để lấy danh sách các nút con của myCell. Danh sách
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    02 bao gồm tất cả các nút con, bất kể tên hoặc loại của chúng là gì. Giống như
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    04, nó trả về một danh sách các nút

    Sự khác biệt là (a)

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    04 chỉ trả về các phần tử của tên thẻ được chỉ định;

    Khi bạn có danh sách được trả về, hãy sử dụng phương pháp

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    07 để truy xuất mục con mong muốn. Ví dụ này lưu trữ trong myCellText nút văn bản của ô thứ hai trong hàng thứ hai của bảng

    Sau đó, để hiển thị kết quả trong ví dụ này, nó tạo một nút văn bản mới có nội dung là dữ liệu của

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    08 và nối nó với tư cách là phần tử con của phần tử
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    04

    Ghi chú. Nếu đối tượng của bạn là nút văn bản, bạn có thể sử dụng thuộc tính dữ liệu và truy xuất nội dung văn bản của nút

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    0

    Nhận một giá trị thuộc tính

    Ở cuối sample1, có một lệnh gọi tới

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    01 trên đối tượng
    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 01. Cuộc gọi này được sử dụng để đặt thuộc tính đường viền của bảng. Để lấy giá trị của thuộc tính, hãy sử dụng phương thức
    function generateTable() {
      // creates a 
    element and a element const tbl = document.createElement("table"); const tblBody = document.createElement("tbody"); // creating all cells for (let i = 0; i < 2; i++) { // creates a table row const row = document.createElement("tr"); for (let j = 0; j < 2; j++) { // Create a in the
    element and a text node, make the text // node the contents of the , and put the at // the end of the table row const cell = document.createElement("td"); const cellText = document.createTextNode(`cell in row ${i}, column ${j}`); cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the
    tbl.appendChild(tblBody); // appends
    into document.body.appendChild(tbl); // sets the border attribute of tbl to '2' tbl.setAttribute("border", "2"); } 02

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    1

    Ẩn cột bằng cách thay đổi thuộc tính kiểu

    Khi bạn có đối tượng trong biến JavaScript của mình, bạn có thể trực tiếp đặt thuộc tính

    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    60. Đoạn mã sau là phiên bản sửa đổi của sample1. html trong đó mỗi ô của cột thứ hai bị ẩn và mỗi ô của cột đầu tiên được thay đổi thành nền màu đỏ. Lưu ý rằng thuộc tính
    table {
      margin: 1rem auto;
    }
    
    td {
      padding: 0.5rem;
    }
    
    60 được đặt trực tiếp