jQuery: перемещение ячейки и заголовка в новую строку таблицы

avatar
andrew
8 августа 2021 в 18:38
55
2
-1

jQuery(".list.list_container").each(function () {
    var $table = $(this);
    $table.append(
    jQuery("<tr>").append(
         $table.find("tr:first td:eq(3)"),"<td></td><td></td>")
    )
});
td {
    border: 2px solid green;
    margin: 5px;
    padding: 5px;
}
<table class="list list_container">
<thead>
<tr>
  <th>one</th>
  <th>two</th>
  <th>three</th>
  <th>four</th>
</tr>
</thead>
    <tbody>
        <tr class="blah_row">
            <td class="first">Blah1</td>
            <td class="second">Blah2</td>
            <td class="third">Blah3</td>
            <td class="last">Blah4</td>
        </tr>
    </tbody>
</table>

JSFIDDLE: http://jsfiddle.net/qsjhcfd1/

Я пытаюсь переместить один из Blahs и соответствующий ему заголовок во вторую строку. Удаление thead работает нормально, поэтому у меня возникли проблемы. Любая помощь приветствуется!

Изменить: Изображение ожидаемого результата

enter image description here

Источник
Twisty
8 августа 2021 в 19:51
0

Добро пожаловать в Stack Overflow. Вы спрашиваете, как переместить Колонну?

andrew
8 августа 2021 в 20:02
0

Только что обновил пост изображением ожидаемого результата.

Ответы (2)

avatar
Twisty
8 августа 2021 в 20:19
0

Рассмотрите следующее:

https://jsfiddle.net/Twisty/8dpwaqfk/

JavaScript

$(function() {
  function addRow(table) {
    // Append a Row to a Specific Table
    $("<tr>").appendTo($("tbody", table));
  }

  function addCell(rIndex, cIndex, table) {
    // Append a Cell after a specific Row and Column to a specific Table 
    $("<td>").insertAfter($("tbody tr", table).eq(rIndex).find("td").eq(cIndex));
  }

  function moveCellDown(cIndex, table) {
    var cell;
    if ($("tbody > tr", table).length == 1) {
      addRow(table);
    }
    $("tbody tr:eq(0) > td", table).each(function(i, el) {
      if (i == cIndex) {
        cell = $(el).detach();
        addCell(0, (i - 1), table);
        cell.appendTo($("tbody tr:eq(1)", table));
      } else {
        $("tbody tr:eq(1)", table).append($("<td>"));
      }
    });
  }

  moveCellDown(2, $(".list"));
});

Использование .detach() может быть очень полезным для этого типа скрипта. Подробнее:

https://api.jquery.com/detach/

Обновление

Увидев ваше изображение, я бы предложил что-то вроде:

https://jsfiddle.net/Twisty/8dpwaqfk/37/

JavaScript

$(function() {
  function addRow(table) {
    // Append a Row to a Specific Table
    $("<tr>", {
      class: "added_row"
    }).appendTo($("tbody", table));
  }

  function moveColumn(cIndex, table) {
    var head = $("thead th", table).eq(cIndex).detach();
    var cell = $("tbody tr:eq(0) td", table).eq(cIndex).detach();
    addRow(table);
    head.appendTo("tbody tr:eq(1)", table);
    addRow(table);
    cell.appendTo("tbody tr:eq(2)", table);
  }

  moveColumn(2, $(".list"));
});
charlietfl
8 августа 2021 в 20:44
0

К сожалению, ничто из этого не приближается к ожидаемым результатам от обновленной ссылки на изображение в вопросе. OP на самом деле хочет две новые строки с <th> из строки <thead> в одной ... очень беспорядочно IMO

Twisty
8 августа 2021 в 20:45
0

@charlietfl, пожалуйста, ознакомьтесь с обновлением

charlietfl
8 августа 2021 в 20:46
0

Да.. выглядит лучше!. Не могу получить прямой ответ от ОП, каков реальный вариант использования, иначе я бы приложил больше усилий.

andrew
8 августа 2021 в 21:08
0

Спасибо Твисти! @charlietfl Я прокомментировал вариант использования вашего поста.

avatar
Max Shevtsov
8 августа 2021 в 21:10
0

jQuery(".list.list_container").each(function () {
    var $table = $(this);
    $table.append('<tr>');
    $('th:contains("three")').appendTo('tbody tr:last');
    //$('th:contains("three")').appendTo('tbody tr:last').wrapInner('<td />').contents().unwrap(); if u need change th to td 
    $table.append('<tr>');
    $('td:contains("Blah3")').appendTo('tbody tr:last');    
});

http://jsfiddle.net/mysmx/qdyr3am7/2/

enter image description here