Добавьте текст th к атрибуту данных в td в этом столбце

Question

Мне нужно сделать некоторое содержимое динамическим c, поэтому каждый раз, когда пишется содержимое для <th> (например, «Имя»), это содержимое сохраняется в var и присваивается атрибуту data-th <td>, но это должно быть сделано в правильном порядке. Итак: <th scope="col">Color</th> имеет содержимое "Color" и, допустим, это второй дочерний элемент, второй <td> дочерний элемент в каждом <tr> должен иметь:
<td data-th="Color">Lorem Ipsum</td>

This вывод, который я хочу создать:

<div class="table-color-bg fake-table-bg">
  <table class="fake-table fake-table-simple table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Company</th>
        <th scope="col">Description</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="Name">Lorem Ipsum</td>
          <td data-th="Company">Lorem Ipsum</td>
          <td data-th="Description">Lorem Ipsum</td>
        </tr>
        <tr>
          <td data-th="Name">Lorem Ipsum</td>
          <td data-th="Company">Lorem Ipsum</td>
          <td data-th="Description">Lorem Ipsum</td>
        </tr>
        <tr>
          <td data-th="Name">Lorem Ipsum</td>
          <td data-th="Company">Lorem Ipsum</td>
          <td data-th="Description">Lorem Ipsum</td>
        </tr>
    </tbody>
  </table>
</div>

Answer 1

Прежде всего вам понадобится скрипт, похожий на этот (с использованием библиотеки jQuery):

$('th').on('update-column', function() {
    var index = $(this).index();
    var value = $(this).text();

    $('td').eq(index).data(value);
});

Во-вторых, каждый раз, когда вы будете изменять содержимое <th>. Вы должны вызвать событие update-column, например:

var th = $(th).eq(1);
th.text('Color');
th.trigger('update-column');