Cách lưu dữ liệu từ bảng HTML vào cơ sở dữ liệu bằng JavaScript

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ả
Lưu ý thứ tự mà chúng tôi đã tạo các phần tử và nút văn bản
Đầu tiên chúng ta tạo phần tử 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
3
Tiếp theo, chúng ta 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
Tiếp theo, chúng ta 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
Đối với mỗi phần tử 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
6, chúng tôi đã sử dụng vòng lặp để tạo 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
Đố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 ô trong 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 cha mẹ của nó theo thứ tự ngược lại
Đầ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
cell.appendChild(cellText);
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ử cha 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
6 của nó bằng cách sử dụng
row.appendChild(cell);
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ử cha 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
4 bằng cách sử dụng
tblBody.appendChild(row);
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ử cha 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
3 của nó bằng cách sử dụng
tbl.appendChild(tblBody);
Tiếp theo, chúng tôi gắn phần tử 
table {
  margin: 1rem auto;
}

td {
  padding: 0.5rem;
}
3 vào phần tử cha của nó là 
row.appendChild(cell);
4 bằng cách sử dụng
document.body.appendChild(tbl);
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 border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
Đâ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ó



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
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
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
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ả
tblBody.appendChild(row);
4 là một phương thức có sẵn trong bất kỳ phần tử DOM 
tblBody.appendChild(row);
5 hoặc phần tử gốc 
tblBody.appendChild(row);
6 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í 
tblBody.appendChild(row);
7 trong mảng
Chúng tôi đã thực hiện các bước sau
Đầu tiên, chúng tôi lấy tất cả các phần tử 
tblBody.appendChild(row);
8 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ử 
tblBody.appendChild(row);
8
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
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 
tbl.appendChild(tblBody);
0 của đối tượng 
tbl.appendChild(tblBody);
1
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
Sử dụng đối tượng tài liệu để gọi phương thức 
tbl.appendChild(tblBody);
2 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 
tbl.appendChild(tblBody);
3 (một đoạn văn bản) có dữ liệu văn bản là 
tbl.appendChild(tblBody);
4 và 
tbl.appendChild(tblBody);
5 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
Vì vậy, bằng cách gọi 
tbl.appendChild(tblBody);
6, bạn đang tạo phần tử con mới của phần tử 
tbl.appendChild(tblBody);
7 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 
tbl.appendChild(tblBody);
3 và nó là nút con thứ hai của thẻ 
tbl.appendChild(tblBody);
7 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
Ghi chú. 
document.body.appendChild(tbl);
0 và 
document.body.appendChild(tbl);
1 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 
document.body.appendChild(tbl);
2 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 xin chào và thế giới, bạn sẽ cần sử dụng 
document.body.appendChild(tbl);
3 thay vì 
document.body.appendChild(tbl);
2
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 
document.body.appendChild(tbl);
5. Ví dụ: nếu bạn muốn tạo phần tử 
tbl.appendChild(tblBody);
7 mới làm phần tử con của phần tử 
row.appendChild(cell);
4, bạn có thể sử dụng phần tử 
document.body.appendChild(tbl);
8 trong ví dụ trước và nối thêm một nút phần tử mới. Để tạo một cuộc gọi nút 
document.body.appendChild(tbl);
9. 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
Các nút có thể được gỡ bỏ. Đoạn mã sau xóa nút văn bản 
tbl.appendChild(tblBody);
5 (chứa từ "thế giới") khỏi phần tử 
tbl.appendChild(tblBody);
7 thứ hai, 
<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
2
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 
tbl.appendChild(tblBody);
5 (chứa từ "thế giới") vẫn tồn tại. Đoạn mã sau đính kèm 
tbl.appendChild(tblBody);
5 vào phần tử 
tbl.appendChild(tblBody);
7 được tạo gần đây, 
<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
6
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
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
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 border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
7, có một dòng mã mới. Thuộc tính 
<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
8 của bảng được đặt bằng một phương thức DOM khác, 
<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
9. 
<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0td>
      <td>cell is row 0 column 1td>
    tr>
    <tr>
      <td>cell is row 1 column 0td>
      <td>cell is row 1 column 1td>
    tr>
  tbody>
table>
9 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 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
1
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
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 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
2 để lấy danh sách các nút con của myCell. Danh sách 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
2 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ư 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
4, nó trả về một danh sách các nút
Sự khác biệt là (a) 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
4 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 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
7 để 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 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
8 và nối thêm nó dưới dạng phần tử con của phần tử 
row.appendChild(cell);
4
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
Ở cuối sample1, có một cuộc gọi đến 
<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hip>
  <p>hellop>
body>
1 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
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 
tbl.appendChild(tblBody);
0. Đ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 
tbl.appendChild(tblBody);
0 được đặt trực tiếp
 

Làm cách nào để lưu bảng HTML vào cơ sở dữ liệu?
Trường hợp sử dụng. Tạo một đơn đặt hàng mới . 
 
Xác định truy vấn. Chúng tôi sẽ xác định hai truy vấn. . 
 
Tạo lược đồ XML. . 
 
Tạo biểu mẫu. . 
 
Liên kết đến cơ sở dữ liệu. . 
 
Xác định truy vấn SQL. . 
 
Tạo một lược đồ XML. . 
 
Tạo biểu mẫu. . 
 
Liên kết đến cơ sở dữ liệu
 
Làm cách nào để trích xuất dữ liệu từ bảng HTML bằng JavaScript?
Đọc dữ liệu cột bằng thuộc tính "cellIndex"
. phương thức getElementById(). Vậy là xong. 
Làm cách nào để xuất dữ liệu từ bảng HTML sang Excel bằng JavaScript?
Mã JavaScript ở trên tuân theo các bước đã cho để xuất bảng sang trang tính excel.  . 
 
Define a function “htmlTableToExcel()” in a 





programming
javascript



Reply
3
0
 Chia sẻ




 







Bài Viết Liên Quan










De thi học kì 1 hóa 9 tphcm năm 2024



mẹo hay
Học Tốt
Học









Nhung loai rau cu tot cho gan và tiên hóa năm 2024



mẹo hay









Phục hồi nút erase trong cs6 bị lỗi năm 2024



mẹo hay
Photoshop bị đơ
Remove Tool Photoshop
Photoshop online









Kiến bu quần lót là hiện tượng gì năm 2024



là ai









Dì ruột bán cháu ở thường xuân thanh hóa năm 2024



mẹo hay









Chương trình giải toán giải toán đại số năm 2024



mẹo hay
Giải toán online
Photomath
Mathway









Chủng chuẩn e.coli atcc 25922 là gì năm 2024



là ai
Hỏi Đáp
Là gì









Có xét ngành nghề khi nhập khẩu hàng hóa năm 2024



mẹo hay









Phần mềm khắc phụ lỗi wifi trên an năm 2024



mẹo hay









Học hỏi những điểm tốt tiếng anh là gì năm 2024



là ai
Hỏi Đáp
Là gì
Học Tốt
Học
Tiếng anh













Bài tập hỗn hợp kim loại tác dụng với hno3 năm 2024



mẹo hay
Khỏe Đẹp
Bài tập









Banner cỡ lớn treo ngoài đường tiếng anh là gì năm 2024



là ai
Hỏi Đáp
Là gì
Học Tốt
Tiếng anh
poster banner, standee
Billboard là gì
Banner treo tường









Phòng khám trung nguyện ở bình đại bến tre năm 2024



mẹo hay









Cường hóa lên thẳng 15 trong nháy mắt năm 2024



mẹo hay









Cải lương chi bảo là gì năm 2024



là ai
Hỏi Đáp
Là gì









Top hãng mặt nạ nội địa trung quốc năm 2024



mẹo hay
Top List
Top









Giải hóa 8 bài nồng độ dung dịch năm 2024



mẹo hay









Goh là viết tắt của gì trong tiếng anh năm 2024



là ai
Học Tốt
Tiếng anh
GOH container
Container lạnh









Bao cáo đầu tư mua đất để làm văn phòng năm 2024



mẹo hay









Anh bộ đội cụ hồ gốc bỉ là gì năm 2024



là ai
Hỏi Đáp
Là gì













Quảng Cáo








Có thể bạn quan tâm




Đánh giá xe mercedes c class năm 2024

2 tháng trước
. bởi
WhitishRebirth





Mv sơn tùng hãy trao cho anh bao nhiêu tiền năm 2024

2 tháng trước
. bởi
MatchingBowling





Cách dùng bao cao su như thế nào năm 2024

2 tháng trước
. bởi
NewDemon





Cách làm bản kiểm điểm lỗi ko làm bài năm 2024

2 tháng trước
. bởi
All-whiteAnnuity





So sánh omron và dr.cảe năm 2024

2 tháng trước
. bởi
MacabreBrunch





Diện tích sàn nhà ở tiếng anh là gì năm 2024

2 tháng trước
. bởi
Decision-makingAnemia





Báo cáo tài chính đã được kiểm toán của vinamilk năm 2024

2 tháng trước
. bởi
Big-cityAdvertising





Conan tập mới nhất là bao nhiêu năm 2024

2 tháng trước
. bởi
CurrentRendition





Bài hát mỗi bước ta đi của nhạc sĩ nào năm 2024

2 tháng trước
. bởi
ErodingAgriculture





Cách fix lỗi minecraft bị crash ưin 7 năm 2024

2 tháng trước
. bởi
GoodlyMomentum








Toplist được quan tâm



#1

Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
6 tháng trước



#2

Top 7 gdcd 6 bài 1 kết nối tri thức 2023
6 tháng trước



#3

Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
6 tháng trước



#4

Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
6 tháng trước



#5

Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
6 tháng trước



#6

Top 6 kết thực phim mỹ nhân vô lệ 2023
6 tháng trước



#7

Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
6 tháng trước



#8

Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
6 tháng trước



#9

Top 5 tiểu sử của thầy thích pháp hòa 2023
6 tháng trước






Quảng cáo







Xem Nhiều




Hạt giống nguyên chủng là gì năm 2024

1 ngày trước





De thi học kì 1 hóa 9 tphcm năm 2024

2 ngày trước





Chủng chuẩn e.coli atcc 25922 là gì năm 2024

1 tuần trước





Phục hồi nút erase trong cs6 bị lỗi năm 2024

4 ngày trước





Nhung loai rau cu tot cho gan và tiên hóa năm 2024

2 ngày trước





Chương trình giải toán giải toán đại số năm 2024

1 tuần trước





Dì ruột bán cháu ở thường xuân thanh hóa năm 2024

5 ngày trước





Kiến bu quần lót là hiện tượng gì năm 2024

4 ngày trước





 

Quảng cáo



















Chúng tôi

Giới thiệu
Liên hệ
Tuyển dụng
Quảng cáo





Điều khoản

Điều khoản hoạt động
Điều kiện tham gia
Quy định cookie





Trợ giúp

Hướng dẫn
Loại bỏ câu hỏi
Liên hệ





Mạng xã hội

 Facebook
 Twitter
 LinkedIn
 Instagram









  



Bản quyền © 2021 Học Tốt Inc.