Dynamic Generated HTML Table Content

Question

I have a HTML Table with multible Table Rows and Columns. There is a data request to an SQL Database. The data is then displayed in the table body. The table headers stay the same.

But now the problem. i don't know why all the data is written in the first column of my html table. The table headers do not match the data be

let table = < HTMLTableElement > document.getElementById("result1");

let row = table.insertRow(-1);

let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
let cell5 = row.insertCell(4);
let cell6 = row.insertCell(5);
let cell7 = row.insertCell(6);

cell1.innerHTML = data[i].projekt_nr;
cell2.innerHTML = data[i].projekt_name;
cell3.innerHTML = data[i].inhalt;
cell4.innerHTML = data[i].bauort;
cell5.innerHTML = data[i].standort;
cell6.innerHTML = datum[i];
cell7.innerHTML = nutzer[i];

<table id="bestand">

  <thead>
    <tr>
      <th>Projekt Nummer</th>
      <th>Projekt Name</th>
      <th>Inhalt</th>
      <th>Bauort</th>
      <th>Standort</th>
      <th>Ausleihdatum</th>
      <th>Nutzer</th>
    </tr>

    <tr>
      <td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
      <td><input type="text" [(ngModel)]="query_2" (ngModelChange)="onSearch_2()"></td>
      <td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
      <td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
      <td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
      <td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
      <td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
    </tr>
  </thead>

  <tbody id="result1">

  </tbody>
</table>

See the following picture. all the data is displayed in the first column. usually the data should match the table headers and the input fields

check this one ; https://stackoverflow.com/questions/171027/add-table-row-in-jquery, especially the solution of Neil — Carl Verret, Nov 22 '19 at 13:10
Question, why are "inserting rows" if you are working with Angular. You should be using interpolation "{{}}" and "*ngFor". — Alberto Rubio, Nov 22 '19 at 13:36

score 0 · Accepted Answer · answered Nov 25 '19 at 10:34

<table id="bestand">     
    <tr class="header">
      <th>Projekt Nummer</th>
      <th>Projekt Name</th>
      <th>Inhalt</th>
      <th>Bauort</th>
      <th>Standort</th>
      <th>Ausleihdatum</th>
      <th>Nutzer</th>
    </tr>

    <tr class="header">
      <td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
      <td><input type="text" [(ngModel)]="query_2" (ngModelChange)="search_2()"></td>
      <td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
      <td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
      <td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
      <td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
      <td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
    </tr>


</table>

Dynamic Generated HTML Table Content

1 Answers1