jQuery交换列

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

问题是因为您要将table的HTML附加到上一个单元格。 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。这很危险地接近90年代后期使用table元素进行布局的错误做法。 table仅应用于表格数据。

使用div以及一些CSS样式化样式，可以使您想要实现的布局更加简单，只需少量的代码。