Добавление строки в таблицу приводит к перемещению элементов в theader в tbody

Question

Я хочу добавить строку в таблицу.

HTML:

<table class="table" id="main-profiles">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Address</th>
      <th scope="col">Mount point</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JQuery:

const row = $('tr')
  .append(`<th scope="row">${++index}</th>`)
  .append(`<td>${profile.name}</td>`)
  .append(`<td><code>${profile.address + ':' + profile.port}<code></td>`)
  .append(`<td><code>${profile.mountPoint}</code></td>`)
  .append(`<td><p>placeholder</p></td>`)

$('#main-profiles').append(row)

Проблема в том, когда При запуске кода содержимое <tr> в <thead> волшебным образом попадает в <tbody>. Вот скриншот, как это выглядит:

Это ошибка или ошибка, которую я сделал? Мне нужен совет.

Answer 1

Есть две проблемы, вызывающие проблему. Во-первых, $('tr') - это выбор строки, а не создание новой. Выбранный tr - это тот, который находится в thead, который вы затем append() переходите в тело таблицы, поэтому кажется, что элемент перемещается. Вместо этого вы должны использовать $('<tr />'), чтобы создать новую строку. Во-вторых, вам нужно append() новую строку в tbody таблицы.

Также обратите внимание, что поскольку вы используете литерал шаблона, вы можете избежать множественных вызовов append(). Попробуйте это:

let index = 0;
let profile = {
  name: 'Foo Bar',
  address: '1 Any Street',
  port: 8080,
  mountPoint: 'Lorem ipsum'
}

const row = $('<tr />').append(`
  <th scope="row">${++index}</th>
  <td>${profile.name}</td>
  <td><code>${profile.address + ':' + profile.port}<code></td>
  <td><code>${profile.mountPoint}</code></td>
  <td><p>placeholder</p></td>`);

$('#main-profiles tbody').append(row)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="main-profiles">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Address</th>
      <th scope="col">Mount point</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

Вы хотите прикрепить к телу, а не к голове, как я предполагаю. Ваш селектор css выбирает первую строку tr, которую он видит, в thead. Я взял на себя смелость превратить вашу строку шаблона в одну строку. Не нужно использовать столько добавлений.

index=1
profile = { name: 'name', address: 'add', port: 'port', 'mountPoint': 'mp' };

const row = $('#main-profiles tbody')
  .append(`<tr><th scope="row">${++index}</th>
<td>${profile.name}</td>
<td><code>${profile.address + ':' + profile.port}<code></td>
<td><code>${profile.mountPoint}</code></td>
<td><p>placeholder</p></td></tr>`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="main-profiles">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Address</th>
      <th scope="col">Mount point</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>