Hướng dẫn how to create table using array in javascript - cách tạo bảng bằng mảng trong javascript

Bí mật của phần tử bảng

Nhiều người thường quên rằng Vanilla JS có khá nhiều sức mạnh. Bạn thực sự không cần các thư viện lạ mắt như Angular, React, hoặc thậm chí là JQuery cho mọi dự án dưới ánh mặt trời. Trong khi nhìn thấy Stackoverflow, tôi đã bắt gặp một thứ gì đó khiến tôi nhớ về điều này và tôi muốn viết một lời bảnh bao nhanh về nó.

Câu hỏi là: Làm cách nào để tạo bảng HTML từ mảng JavaScript 2 chiều? liên kết ở đâyHow do I Generate an HTML table from a 2 Dimensional JavaScript Array? link here

Synopsis:

Làm cách nào để chuyển đổi điều này:

var tableArr = [
 [“row 1, cell 1”, “row 1, cell 2”],
 [“row 2, cell 1”, “row 2, cell 2”]
]

vào một cái bàn trông như thế này:

Điều này đã mở ra một torrent bất ngờ của những người trả lời câu hỏi bằng cách sử dụng các lần lặp quá phức tạp, nhiều khai báo mảng và hợp nhất, và một số sử dụng kết nối chuỗi.

Câu trả lời được chấp nhận, mặc dù hợp lý, không (theo ý kiến ​​của tôi) là câu trả lời tốt nhất. Tại sao? Nếu bạn chỉ bắt đầu thiết kế web, hoặc bạn đã tham gia chỉ trong một thời gian ngắn, bạn có thể không nhận ra rằng các bảng là một phần thiết yếu của web trong nhiều năm.

Không có những tiến bộ trong CSS cho phép bạn chia trang của mình thành 9 hoặc 12 cột dễ dàng và hàng vô hạn, tổ chức nội dung trở lại trong ngày (nếu tôi có thể rất mơ hồ và cổ xưa) , phổ biến hơn, bảng.back in the day (if I can be so vague and ancient) was memorably more frustrating and required heavy use of Frames or, more commonly, Tables.

Đây là trường hợp DOM thực sự được mở rộng để bao gồm các phương thức dễ sử dụng trên chính phần tử bảng. Có những cuộc biểu tình về điều này xung quanh, nhưng có vẻ như chúng thường bị lãng quên. Hãy cùng xem!

Đối tượng bảng

Hãy cùng nhìn nhanh vào bên trong đối tượng bảng. Hãy để đăng nhập nó vào bảng điều khiển bằng cách sử dụng

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

let table = document.createElement('table');
console.dir(table);

(Liên kết JSFiddle)

Kết quả trong bảng điều khiển trình duyệt của bạn sẽ cung cấp cho bạn một yếu tố mở rộng. Nếu bạn mở rộng, bạn sẽ nhận được tất cả các thuộc tính của phần tử bảng, bao gồm tất cả các thuộc tính phần tử tiêu chuẩn như

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

Các thuộc tính đều được đặt tên theo thứ tự bảng chữ cái và nếu bạn cuộn xuống r, bạn có thể ngạc nhiên khi thấy một tài sản có tiêu đề

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

Trong các hàng thiết lập hiện tại của chúng tôi trống. Hãy để thay đổi điều đó.

INSERTROW và INSERTCELL

Làm thế nào để chúng ta thêm một hàng lập trình? Như thế này:

let table = document.createElement('table');
table.insertRow();
console.log(table);

(Liên kết JSFiddle)

Kết quả trong bảng điều khiển trình duyệt của bạn sẽ cung cấp cho bạn một yếu tố mở rộng. Nếu bạn mở rộng, bạn sẽ nhận được tất cả các thuộc tính của phần tử bảng, bao gồm tất cả các thuộc tính phần tử tiêu chuẩn như

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

Các thuộc tính đều được đặt tên theo thứ tự bảng chữ cái và nếu bạn cuộn xuống r, bạn có thể ngạc nhiên khi thấy một tài sản có tiêu đề

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

Trong các hàng thiết lập hiện tại của chúng tôi trống. Hãy để thay đổi điều đó.

INSERTROW và INSERTCELL

Làm thế nào để chúng ta thêm một hàng lập trình? Như thế này:

let table = document.createElement('table');
let row = table.insertRow();
let cell = row.insertCell();
cell.textContent = "New Cell!";document.body.appendChild(table);

(Liên kết JSFiddle)

Kết quả trong bảng điều khiển trình duyệt của bạn sẽ cung cấp cho bạn một yếu tố mở rộng. Nếu bạn mở rộng, bạn sẽ nhận được tất cả các thuộc tính của phần tử bảng, bao gồm tất cả các thuộc tính phần tử tiêu chuẩn như

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

Các thuộc tính đều được đặt tên theo thứ tự bảng chữ cái và nếu bạn cuộn xuống r, bạn có thể ngạc nhiên khi thấy một tài sản có tiêu đề function tryit(){ document .getElementById("thisTable") .innerHTML="<tr><td>"+String(thisArray) .replace(/--,/g,"</td></tr><tr><td>") .replace(/__,/g,"</td><td>"); } 8

Trong các hàng thiết lập hiện tại của chúng tôi trống. Hãy để thay đổi điều đó.

Synopsis:

Làm cách nào để chuyển đổi điều này:

var tableArr = [
 [“row 1, cell 1”, “row 1, cell 2”],
 [“row 2, cell 1”, “row 2, cell 2”]
]

vào một cái bàn trông như thế này:

Điều này đã mở ra một torrent bất ngờ của những người trả lời câu hỏi bằng cách sử dụng các lần lặp quá phức tạp, nhiều khai báo mảng và hợp nhất, và một số sử dụng kết nối chuỗi.

1. Câu trả lời được chấp nhận, mặc dù hợp lý, không (theo ý kiến ​​của tôi) là câu trả lời tốt nhất. Tại sao? Nếu bạn chỉ bắt đầu thiết kế web, hoặc bạn đã tham gia chỉ trong một thời gian ngắn, bạn có thể không nhận ra rằng các bảng là một phần thiết yếu của web trong nhiều năm.
2. Không có Indy, nó không có.
3. Không có những tiến bộ trong CSS cho phép bạn chia trang của mình thành 9 hoặc 12 cột dễ dàng và hàng vô hạn, tổ chức nội dung trở lại trong ngày (nếu tôi có thể rất mơ hồ và cổ xưa) , phổ biến hơn, bảng.
4. Đây là trường hợp DOM thực sự được mở rộng để bao gồm các phương thức dễ sử dụng trên chính phần tử bảng. Có những cuộc biểu tình về điều này xung quanh, nhưng có vẻ như chúng thường bị lãng quên. Hãy cùng xem!
5. Đối tượng bảng

Hãy cùng nhìn nhanh vào bên trong đối tượng bảng. Hãy để đăng nhập nó vào bảng điều khiển bằng cách sử dụng

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}

//setup our table array
var tableArr = [
  ["row 1, cell 1", "row 1, cell 2"],
  ["row 2, cell 1", "row 2, cell 2"]
]//create a Table Object
let table = document.createElement('table');//iterate over every array(row) within tableArr
for (let row of tableArr) {//Insert a new row element into the table element
  table.insertRow();//Iterate over every index(cell) in each array(row)
  for (let cell of row) {//While iterating over the index(cell)
//insert a cell into the table element
    let newCell = table.rows[table.rows.length - 1].insertCell();//add text to the created cell element
    newCell.textContent = cell;
  }
}//append the compiled table to the DOM
document.body.appendChild(table);

(Liên kết JSFiddle)

Kết quả trong bảng điều khiển trình duyệt của bạn sẽ cung cấp cho bạn một yếu tố mở rộng. Nếu bạn mở rộng, bạn sẽ nhận được tất cả các thuộc tính của phần tử bảng, bao gồm tất cả các thuộc tính phần tử tiêu chuẩn như function tryit(){ document .getElementById("thisTable") .innerHTML="<tr><td>"+String(thisArray) .replace(/--,/g,"</td></tr><tr><td>") .replace(/__,/g,"</td><td>"); } 6 và function tryit(){ document .getElementById("thisTable") .innerHTML="<tr><td>"+String(thisArray) .replace(/--,/g,"</td></tr><tr><td>") .replace(/__,/g,"</td><td>"); } 7

Các thuộc tính đều được đặt tên theo thứ tự bảng chữ cái và nếu bạn cuộn xuống r, bạn có thể ngạc nhiên khi thấy một tài sản có tiêu đề

function tryit(){
  document
    .getElementById("thisTable")
    .innerHTML="<tr><td>"+String(thisArray)
    .replace(/--,/g,"</td></tr><tr><td>")
    .replace(/__,/g,"</td><td>");
}