动态 Javascript Table

Question

有谁知道如何使用 Javascript 或 JQuery 将我的数据转换为 table，我得到了这个数据，例如：

var data1 = ["1","3","5"]
var data2 = ["a","b","c"]

更新 data1 和 data2 值后，行和列也会自动更新。

结果：

等等：

没有。字母表
1 一个
3 b
5 c

Answer 1

有两种方法可以做到这一点。一，你用 function/class 包裹你的数据，并有一个 "changedata" 方法来更改数据并更新 html 或者你有一个 setInterval 来监听这些变量的变化并提供变化给你标记。我觉得前者比后者好很多

Answer 2

我喜欢创建一个函数来动态设置 div 的 innerHTML 的想法，并用 table 传播它。

它应该看起来像这样：

function generate_table(array1, array2) {

    var html = '<table>';

    // cycles through all the elements in the array
    for (var i = 0; i < array1.length; i++) {
        html += '<tr><td>' + array1[i] + '</td><td>' + array2[i] + '</td></tr>';
    }

    html += '</table>';

    // places the table in the element
    document.getElementById('content').innerHTML = html; 

}

generate_table() 接受两个数组并构造一个 String，在 for 循环中将其与数组的内容一起传播。然后它得到一个名为 content 的 div 并设置它的 innerHTML 以创建 table.

在您的网页中，请务必包含将要插入 table 的 div：

<div id="content"></div>

您也可以在数组每次刷新时调用 generate_table()，table 也会更新。

希望对您有所帮助！

Answer 3

在您的 .html 文件中

<table class="myTable"></table>

在您的 .js 文件中

function generateTable(data1, data2){
  var $table = $('.myTable');
    for (var i = 0; i < data1.length; i++){
      var $aSingleContent = '<tr><td>'+data1[i]+'</td><td>'+data2[i]+'</td></tr>';
      $table.append($aSingleContent);
    }
}
function modifyData() {
  var data1 = ["1","3","5"];
  var data2 = ["a","b","c"];
  generateTable(data1, data2);
}

--------------------------------更新--------
我把代码放在jsfiddle

http://jsfiddle.net/ronansmith/daLf9t85/

记得添加外部资源 of jQuery

动态 Javascript Table

Dynamic Javascript Table

javascript

jquery

dynamic