Добавить tbody td к th на основе аналогичного индекса

Question

Я пытаюсь добавить тело к аналогу с тем же индексом.

$("table").find("th").each(function(i, e) {
  console.log(i, e)
  $(this).attr('head-index', i)
});

$("table").find("td").each(function(i, e) {
  console.log(i, e)
  $(this).attr('row-index', i)
});

var tableTH = $("table > thead > tr > th");
var tableTR = $("table > tbody > tr > td");

if ($(tableTH).attr == $(tableTR).attr) {

} else {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 7</td>
      <td>Content 8</td>
    </tr>
  </tbody>
</table>

Эта функция будет запускаться только в мобильном представлении.

Конечный результат ожидается.

введите описание изображения здесь

* Отредактировано (что еще есть TR)

Answer 1

Это вы пытаетесь достичь?

$(function(){
  var th = $("table > thead > tr > th");
  var td = $("table > tbody > tr > td");

  $('thead tr').each(function(th_index,th_item) {
    var index = $(th_item).attr("data-th-index");
    var row = $('tbody tr[data-td-index="'+index+'"]');
    row.each(function(td_index,td_item){
      $(th_item).after(td_item);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
      <thead>
        <tr data-th-index="1">
          <th>Content 1 Head</th>
          </tr>
          <tr data-th-index="2">
          <th >Content 2 Head</th>
                    </tr>
          <tr data-th-index="3">
          <th >Content 3 Head</th>
        </tr>
      </thead>
      <tbody>
        <tr data-td-index="1">
          <td >Content 1</td>
          </tr>
          <tr data-td-index="2">
          <td >Content 2</td>
                    </tr>
          <tr data-td-index="3">
          <td >Content 3</td>
                    </tr>
          <tr data-td-index="1">
          <td >Content 5</td>
                    </tr>
          <tr data-td-index="2">
          <td >Content 6</td>
                    </tr>
          <tr data-td-index="3">
          <td >Content 7</td>
        </tr>
      </tbody>
    </table>

Answer 2

1. Используйте $.each на всех TD с
2. Если index - четное число, добавьте сначала th (Глава 1)
3. Если index -нечетное число, затем добавьте второй th (Глава 2)
4. Добавить строку и создать новую таблицу

var new_table_string="";
$.each($("table tbody tr td"), function (index,value){
    console.log(value);
    var tdval= $(this).html()
    new_table_string += "<tr><th>" + $("table thead tr th").eq(index%2).html() + "</th></tr><tr><td>" + tdval + "</td></tr>";
});
//$("table").empty();
$(".table2").append(new_table_string);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Before:
<table class="table table-hover" border="1">
  <thead>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 3</td>
      <td>Content 4</td>
    </tr>
    <tr>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
    <tr>
      <td>Content 7</td>
      <td>Content 8</td>
    </tr>
  </tbody>
</table>
After:
<table class="table2" border="1"></table>

Answer 3

Вы можете использовать .each() для циклического перемещения по заголовкам и селектор атрибутов для выбора, чтобы получить строку с тем же индексом.

$("table").find("th").each(function(i, e) {
  $(this).attr('head-index', i)
});

$("table").find("td").each(function(i, e) {
  $(this).attr('row-index', i)
});

var tableTH = $("table > thead > tr > th");
var tableTR = $("table > tbody > tr > td");

tableTH.each(function() {
  var index = $(this).attr("head-index");
  var row = tableTR.filter(`[row-index=${index}]`);
  $(this).after(row);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Content 1 Head</th>
      <th>Content 2 Head</th>
      <th>Content 3 Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
  </tbody>
</table>

Я использовал .after() вместо .append(). Вы не можете добавить <td> внутрь <th>, они оба должны быть детьми <tr>.