如何將數組填充到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表格中

回答

相關問題