JQuery Swap Column

Question

Мне нужно поменять столбец в таблице, но сохранить текущее значение редактирования столбца.

Вот мой код:

$(this).click(function () {
    var $td = $(this).closest('td.container');
    var $tds = [];
    $td.closest('tr').children('td').each(function () { $tds.push($(this)); });
    for (var i = $td.index() + 1; i < $tds.length; i++)
        $tds[i - 1].html($tds[i].html()).addClass('border');
    $tds[$tds.length - 1].html('').removeClass('border');
});

Однако, если у меня есть текстовые поля и редактируемые текстовые поля при замене столбца, значения текстового поля исчезнут.

Вот это jsfiddle .

Step to reproduce:
1. Enter some text in textbox in column #3
2. Click on "Delete Button" in column #2
3. You will see the text entered in step #1 will disappear.

Есть идеи, как решить эту проблему?

Answer 1

Проблема в том, что вы добавляете HTML-код table в предыдущую ячейку. HTML-код не содержит измененное свойство value элементов input, в которые пользователь вводил данные. Чтобы исправить это, скопируйте элементы из DOM, а не их HTML.

Также обратите внимание, что ваша логика может быть упрощена. Во-первых, вам не нужен цикл each(), поскольку вы можете напрямую применить обработчик события click() к коллекции элементов button. Вы также можете работать с самим объектом jQuery, вместо того, чтобы циклически обходить его, чтобы создать бессмысленный массив объектов jQuery, который вам нужно снова повторить.

$('#tblContent button').click(function() {
  var $container = $(this).closest('td.container');
  var $content = $container.next().children()
  $container.empty().append($content);
});

.container {
  width: 256px;
  padding: 8px;
}

.container.border {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblContent">
  <tbody>
    <tr>
      <td class='container border'>
        <table style="table-layout:fixed;width:100%'">
          <tbody>
            <tr>
              <td>
                <label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 1 OK?</label>
              </td>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 1" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 2" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td><button disabled>Deleteme</button></td>
              </tr>
          </tbody>
        </table>
      </td>
      <td class='container border'>
        <table style="table-layout:fixed;width:100%'">
          <tbody>
            <tr>
              <td>
                <label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 2 OK</label>
              </td>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 3" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 4" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td><button>Deleteme</button></td>
              </tr>
          </tbody>
        </table>
      </td>
      <td class='container border'>
        <table style="table-layout:fixed;width:100%'">
          <tbody>
            <tr>
              <td>
                <label class="checkbox-inline"><input type="checkbox" data-name="isactive" value="1">Column 3 OK</label>
              </td>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 5" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" placeholder="Put something here 6" maxlength="64" style="width:100%" />
                </td>
              </tr>
              <tr>
                <td><button disabled>Deleteme</button></td>
              </tr>
          </tbody>
        </table>
      </td>
      </tr>
  </tbody>
</table>

Наконец, я бы посоветовал вам рассмотреть, как вы структурируете HTML-код этой страницы. Это опасно близко к плохой практике использования элементов макета table в конце 90-х годов. table следует использовать только для табличных данных.

Макет, который вы пытаетесь достичь, можно сделать намного проще, используя div вместе с некоторым CSS для его стилизации, за долю кода.