HTMLテーブルに配列を塗りつぶす方法

-3

HTMLテーブルを配列に塗りたい。 $ rowTemplate.find（ '[data-id = id]'）で試してみました。HTMLテーブルに配列を塗りつぶす方法

しかし、動作しませんでした。私はソケットで作業するので、あまりにも混乱する可能性があるすべてのコードを投稿することはできません。

私のコードのいくつかを広告しますが、2次元配列の入力を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

コードに間違いがあります...「Uncaught 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関数でカスケードを開始すると機能しないようです。

編集：それを行う別の方法は、行を手動で "ビルド"することです。代わりのrowTemplate = $('...');などのjQueryを使ってHTMLを解析して、あなたはバニラJavaScriptでこのようにそれを行うことができますjQueryのセレクタでそれを操作する：

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（）が実装された方法に依存します。

EDIT 2：第二版のため

チェックhttps://jsfiddle.net/Lv9vdv8u/。

出典

2016-12-03 20:58:27 y030

このスキームを使わないと他の方法はありませんか？ – Addy1992

はい、あなたそれがあなたが意味するものなら、 "テンプレート"なしでそれを行うことができます。私の編集された答えにはそうです。 – y030

あなたはおそらくあなたの編集を忠実に広告できますか？ – Addy1992

HTMLテーブルに配列を塗りつぶす方法

答えて

関連する問題