如何将数组填充到HTML表格中

-3

我想用我的数组填充我的HTML表格。我试过$ rowTemplate.find（'[data-id = id]'）。text（id）;如何将数组填充到HTML表格中

但它没有奏效。我使用套接字工作，所以我不能发布我所有的代码，这太容易混淆了。

我会广告一些我的代码，但这是一个普遍的问题，如何用一个两个暗淡数组的输入来填充HTML表格。

socket.on('outputData', function(data) { 
 
     var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>'); 
 
     var resultArray = data.resultArray; 
 
     var name, location, bdate, id, anzahl = 0; 
 
     for (var i = 0; i < resultArray.length; i++) { 
 
     name = resultArray[i][0]; 
 
     anzahl = anzahl + 1; 
 
\t \t \t \t \t console.log(name); 
 
\t \t \t \t \t location = resultArray[i][1]; 
 
\t \t \t \t \t bdate = resultArray[i][2]; 
 
\t \t \t \t \t favorit = resultArray[i][3]; 
 
\t \t \t \t \t id = resultArray[i][4]; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t $rowTemplate.find('[data-id=id]').text(id); 
 
\t \t \t \t \t $rowTemplate.find('[data-id=name]').text(name); 
 
\t \t \t \t \t $rowTemplate.find('[data-id=geburtsort]').text(location); 
 
\t \t \t \t \t $rowTemplate.find('[data-id=geburtsdatum]').text(bdate); 
 
\t \t \t \t } 
 
    $("#table > tbody").append(rowTemplate.html()); 
 
\t \t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<body> 
 
    <table id="table"> 
 
    <tbody> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     <th>Geburtsort</th> 
 
     <th>Geburtsdatum</th> 
 
     <th>Favorit</th> 
 
     </tr> 
 
    </tbody> 
 
    </table>

来源

2016-12-03 Addy1992

代码中有一个错误...未捕获的SyntaxError：意外的字符串 - 谨慎解决这个问题？ –

我刚刚添加了一部分代码：/代码不重要我只想知道如何填充表格 – Addy1992

我仍然告诉那是一个语法错误。 –

问题在于您的变量rowTemplate。摆脱$，它应该工作。

var rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>'); 

rowTemplate.find("[data-id=id]").text("bcd");

测试它在这里：https://jsfiddle.net/Lwmu4p6q/

我不明白为什么是这样的话，虽然。我认为这是jQuery的问题。您仍然可以使用以美元符号开头的变量，但是当您开始使用jQuery函数级联时，它似乎不起作用。

编辑：另一种方法来做到这一点将手动“建立”行。相反解析与jQuery的HTML像rowTemplate = $('...');，然后用jQuery选择，你可以用香草的JavaScript做这样的操作吧：

var outputHTML = ""; 
for (var i = 0; i < array.length; i++) { // i for the rows 
    var newRow = "<tr>"; 
    for (var j = 0; j < array[i].length; j++) { // j for the colums 
    newRow += "<td>" + array[i][j] + "</td>"; 
    } 
    outputHTML += newRow + "</tr>"; 
}

我会建议使用let代替var如果可能的话。我认为这个版本可能执行得更快，但是如果存在的话，这种差异只会对真正大的表格有影响。不过，这取决于jQuery选择器和text（）的实现方式。

编辑2：

检查https://jsfiddle.net/Lv9vdv8u/的第二个版本。

来源

2016-12-03 20:58:27 y030

有没有其他的方式来做到这一点？没有这个方案？ – Addy1992

是的，你可以在没有“模板”的情况下做到这一点，如果这就是你的意思。一种方法是在我编辑的答案中。 – y030

你可以在你的编辑中做一个小提琴吗？ – Addy1992

如何将数组填充到HTML表格中

回答

相关问题