动态Javascript表

Question

有没有人知道如何使用Javascript或JQuery将我的数据转换为表格，我得到了这些数据，例如：

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

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

结果：

等：

没有。字母
1 a 3 b
5 c

Answer 1

我喜欢创建一个动态设置innerHTML的{​​{1}}的函数，并用表格传播它。

看起来应该是这样的：

div

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()，在for循环中使用数组的内容传播它。然后，它会获得名为String的{​​{1}}并设置其div以创建表格。

在您的网页中，请确保包含要插入表格的content：

innerHTML

每次数组刷新时，您也可以调用div，表格也会更新。

我希望这可以帮到你！

Answer 2

在.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/

记得添加jQuery的外部资源

Answer 3

有两种方法可以做到这一点。一，你在数据周围包装一个函数/类，并有一个“changedata”方法来更改数据并更新html，或者你有一个setInterval来监听这些变量的变化，并为你的标记提供更改。在我看来，前者比后者要好得多