Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Tworzenie tablicy html z wielowymiarowej tablicy javascript - javascript, jquery, tablica wielowymiarowa, tablica html

Tworzenie tablicy html z wielowymiarowej tablicy javascript - javascript, jquery, tablica wielowymiarowa, tablica html

Próbowałem utworzyć tabelę html z zagnieżdżonej tablicy pętli for w JavaScript. Kiedy próbuję dołączyć <tr> znaczniki do stołu, które umieszcza się w elemencie zwanym tbody. Jak mogę dodać znaczniki tr do dołączenia do elementu table zamiast elementu tbody?

<html>
<head>
<script src="jq.js"></script>
</head>
<body>
<table id="tb"></table>

</body>
<script>
$("#tb").ready(
function() {
console.log("table loaded");

var ar = Array(2);

for(var i=0;i<ar.length;i++){
ar[i]=Array(2);
}

ar[0][0]="1";
ar[1][0]="2";
ar[0][1]="3";
ar[1][1]="4";

console.log("multidimensional array created!");

for(var j=0;j<ar.length;j++){
console.log("<tr>");
$("#tb").append("<tr>");
for(var k=0;k<2;k++){
console.log("<td>"+ar[k][j]+"</td>");
$("#tb").append("<td>"+ar[k][j]+"</td>");
}
console.log("</tr>");
$("#tb").append("</tr>");
}
//expected:
//12
//34
//actual
//1 2 3 4
});
</script>
</html>

Tutaj jest jsfiddle

Odpowiedzi:

2 dla odpowiedzi № 1

Nie powinieneś dodawać takich treści do twojego stołu, ponieważ przeglądarka musi przerysować cały DOM, więc nie jest zbyt wydajna.

Powinieneś zbudować swój stół w ciągu znaków, a następnie dodać cały ciąg do tabeli, na przykład:

$("#tb").ready(
function() {
console.log("table loaded");

var ar = Array(2);

for(var i=0;i<ar.length;i++){
ar[i]=Array(2);
}

ar[0][0]="1";
ar[1][0]="2";
ar[0][1]="3";
ar[1][1]="4";

console.log("multidimensional array created!");
//Prepare the outputed string
var theTable = "";
for(var j=0;j<ar.length;j++){
theTable += "<tr>";
for(var k=0;k<2;k++){
theTable += "<td>"+ar[k][j]+"</td>";
}
theTable += "</tr>";
}
//Finally appended the whole string to the table
$("#tb").append(theTable);
//expected:
//12
//34
//actual
//1 2 3 4
});

Zrobiłem dla ciebie Jsfiddle: JSFiddle

Baw się dobrze !

3 dla odpowiedzi № 2

Nie możesz. T. Tabele HTML składają się z trzech sekcji:

thead zawiera wiersze nagłówka
tbody zawiera wiersze danych. Możesz mieć wiele z nich, jeśli chcesz tworzyć różne grupy wierszy (np. Jeśli wiersze = miesiące, możesz mieć osobne tbody za każdy rok).
tfoot zawiera wiersze stopki

Jeśli umieścisz wiersze bezpośrednio w table tag, zakładają, że są częścią tbody, a przeglądarka automatycznie utworzy ten element. Musisz umieścić wszystkie swoje wiersze tbody elementy lub umieść je wszystkie bezpośrednio w środku table.

Problem z twoim kodem nie ma nic wspólnego z tbody element. Problem polega na tym, że próbujesz się przyłączyć td elementy bezpośrednio do tabeli, a nie do tr elementy. Leczysz $("#tb").append() tak, jakby łączył tekst HTML z dokumentem, nie wstawiając całych elementów HTML. Powinien to być coś takiego:

     for(var j=0;j<ar.length;j++){
console.log("<tr>");
var row = $("<tr/>").appendTo("#tb");
for(var k=0;k<2;k++){
console.log("<td>"+ar[k][j]+"</td>");
row.append("<td>"+ar[k][j]+"</td>"); // Append TD to TR
}
}

Lub możesz użyć odpowiedzi CtrlX, gdzie komponuje całą tabelę jako ciąg, a następnie wstawia ją do DOM w jednym kroku. Jest to bardziej efektywne niż budowanie tabeli narastająco.

0 dla odpowiedzi № 3

   <body>
<table id="tb1">
<tbody id="tb">
</tbody>

</table>

</body>
<script>
$("#tb").ready(
function() {
console.log("table loaded");

var ar = Array(2);

for(var i=0;i<ar.length;i++){
ar[i]=Array(2);
}

ar[0][0]="1";
ar[1][0]="2";
ar[0][1]="3";
ar[1][1]="4";

console.log("multidimensional array created!");

for(var j=0;j<ar.length;j++){

$("#tb").append("<tr>");
for(var k=0;k<2;k++){
$("#tb").append("<td>"+ar[k][j]+"</td>");
}
$("#tb").append("</tr>");
}
//expected:
//12
//34
//actual
//1 2 3 4
});
</script>
</html>

to działa kod na tym skrzypcach http://jsfiddle.net/fn4Wz/