Tạo bảng HTML từ mảng JavaScript

Question

Trong JavaScript, có thể tạo bảng HTML từ một mảng 2D không? Cú pháp để viết các bảng HTML có xu hướng được rất dài dòng, vì vậy tôi muốn tạo ra một bảng HTML từ một mảng JavaScript 2D, như:

[["row 1, cell 1", "row 1, cell 2"], 
["row 2, cell 1", "row 2, cell 2"]] 

sẽ trở thành:

<table border="1"> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

Vì vậy, tôi cố gắng viết một hàm javaScript sẽ trả về một bảng từ một mảng JavaScript 2D, như được hiển thị:

function getTable(array){ 
    //take a 2D JavaScript string array as input, and return an HTML table. 
} 

Answer 1

Đây là chức năng sẽ sử dụng dấu thay vì nối chuỗi.

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var tableBody = document.createElement('tbody'); 

    tableData.forEach(function(rowData) { 
    var row = document.createElement('tr'); 

    rowData.forEach(function(cellData) { 
     var cell = document.createElement('td'); 
     cell.appendChild(document.createTextNode(cellData)); 
     row.appendChild(cell); 
    }); 

    tableBody.appendChild(row); 
    }); 

    table.appendChild(tableBody); 
    document.body.appendChild(table); 
} 

createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]); 

Answer 2

Điều này khá dễ làm với một vòng lặp đôi.

function makeTableHTML(myArray) { 
    var result = "<table border=1>"; 
    for(var i=0; i<myArray.length; i++) { 
     result += "<tr>"; 
     for(var j=0; j<myArray[i].length; j++){ 
      result += "<td>"+myArray[i][j]+"</td>"; 
     } 
     result += "</tr>"; 
    } 
    result += "</table>"; 

    return result; 
} 

Answer 3

Một phiên bản ít HTML khác bên trong.

function makeTable(array) { 
    var table = document.createElement('table'); 
    for (var i = 0; i < array.length; i++) { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < array[i].length; j++) { 
      var cell = document.createElement('td'); 
      cell.textContent = array[i][j]; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
    return table; 
} 

Answer 4

Tôi biết đây là một câu hỏi cũ, nhưng đối với những perusing web như tôi, đây là một giải pháp:

Sử dụng replace() trên dấu phẩy và tạo ra một tập hợp các ký tự để xác định khi kết thúc của một hàng . Tôi chỉ cần thêm -- vào cuối các mảng nội bộ. Bằng cách đó bạn không phải chạy hàm for.

Dưới đây là một JSFiddle: https://jsfiddle.net/0rpb22pt/2/

Trước tiên, bạn phải có được một bảng bên trong HTML của bạn và cung cấp cho nó một id:

<table id="thisTable"><tr><td>Click me</td></tr></table> 

Dưới đây là mảng của bạn thay đổi nội dung cho phương pháp này:

thisArray=[["row 1, cell 1__", "row 2, cell 2--"], ["row 2, cell 1__", "row 2, cell 2"]]; 

Chú ý số -- được thêm vào cuối mỗi mảng.

Vì bạn cũng có dấu phẩy bên trong của mảng, bạn phải phân biệt chúng bằng cách nào đó, do đó bạn không kết thúc việc thêm bảng __ sau khi ô (bên cạnh ô cuối cùng liên tiếp) hoạt động. Nếu bạn không có dấu phẩy trong ô của mình, bước này sẽ không cần thiết.

Bây giờ đây là chức năng của bạn:

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

Nó hoạt động như thế này:

1. Gọi bảng của bạn và nhận được để thiết lập các innerHTML. document.getElementById("thisTable").innerHTML
2. Bắt đầu bằng cách thêm thẻ HTML để bắt đầu một hàng và dữ liệu. "<tr><td>"
3. Thêm thisArray làm String(). +String(thisArray)
4. Thay thế mỗi -- kết thúc trước một hàng mới với việc đóng và mở dữ liệu và hàng..replace(/--,/g,"</td></tr><tr><td>")
5. Dấu phẩy khác biểu thị dữ liệu riêng lẻ trong các dòng. Vì vậy, thay thế tất cả các dấu phẩy đóng và mở dữ liệu. Trong trường hợp này không phải tất cả dấu phẩy nằm giữa các hàng vì các ô có dấu phẩy, vì vậy chúng tôi phải phân biệt các dấu phẩy với __: .replace(/__,/g,"</td><td>"). Thông thường bạn chỉ cần thực hiện .replace(/,/g,"</td><td>").

Miễn là bạn không ngại thêm một số ký tự đi lạc vào mảng của mình, nó chiếm ít mã hơn và rất dễ triển khai.

Answer 5

Nếu bạn không nhớ jQuery, tôi đang sử dụng this:

<table id="metaConfigTable"> 
    <caption>This is your target table</caption> 
    <tr> 
     <th>Key</th> 
     <th>Value</th> 
    </tr> 
</table> 

<script> 

    function tabelajzing(a){ 
    // takes (key, value) pairs from and array and returns 
    // corresponding html, i.e. [ [1,2], [3,4], [5,6] ] 
     return [ 
     "<tr>\n<th>", 
     a.map(function (e, i) { 
      return e.join("</th>\n<td>") 
     }).join("</td></tr>\n<tr>\n<th>"), 
     "</td>\n</tr>\n" 
     ].join("") 
    } 

    $('#metaConfigTable').find("tr").after(
     tabelajzing([ [1,2],[3,4],[5,6] ]) 
); 
</script> 

Answer 6

Một phiên bản es6 của Daniel Williams' câu trả lời:

function get_table(data) { 
    let result = ["<table border=1'>"]; 
    for(let row of data) { 
     result.push("<tr>"); 
     for(let cell of row){ 
      result.push(`<td>${cell}</td>`); 
     } 
     result.push("</tr>"); 
    } 
    result.push("</table>"); 
    return result.join('\n'); 
    } 

Answer 7

Nhanh chóng và dễ dàng.

function createTable(tableData) { 
    var table = document.createElement('table'); 
    var row = {}; 
    var cell = {}; 

    tableData.forEach(function(rowData) { 
    row = table.insertRow(-1); // [-1] for last position in Safari 
    rowData.forEach(function(cellData) { 
     cell = row.insertCell(); 
     cell.textContent = cellData; 
    }); 
    }); 
    document.body.appendChild(table); 
} 

https://jsfiddle.net/6urdwdtf/1/