动态生成的 HTML 表格内容

Question

我有一个包含多个表格行和列的 HTML 表格。 有一个对 SQL 数据库的数据请求。 然后数据将显示在表体中。 表头保持不变。

但是现在问题来了。我不知道为什么所有数据都写在我的 html 表的第一列中。 表头与数据不匹配是

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

Answer 1

<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>