桌子上有两个人在桌子上并排，头在上面

Question

我想创建一个如下所示的 HTML 表格：

    Left context | Right context | Delete row?
-------------------------------------------
1   [input]        [input]         Y/N
2   [input]        [input]         Y/N
3   [input]        [input]         Y/N

这看起来很简单。问题是我想使用 jQuery UI 使行可排序。这也很容易（在tbody 上致电.sortable()），但是我觉得这非常难看，因为数字随行移动。我想要的是只有“真实”行移动，没有索引（1、2、3 等）。这些数字应始终位于同一位置，但行可以移动。

我想我可以简单地在表中创建一个新的 tbody，在 thead 之后，它只包含数字，然后在只包含行的 tbody 上调用 .sortable。但是，这显然行不通：这些表格不会并排浮动，而是放在彼此上方。

任何想法如何处理这个？ JSFiddle上的测试用例：

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Left context</th>
            <th>Right context</th>
            <th class="text-center">Delete row?</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
    </tbody>
    <tbody class="sortable">
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
        <tr class="ui-state-default">
            <td>
                <input type="text" class="form-control left-context" value="">
            </td>
            <td>
                <input type="text" class="form-control right-context" value="">
            </td>
            <td>
                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash-o"></i>

                </button>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我建议在显示为表格单元格的伪元素中使用 CSS 计数器：

$("tbody").sortable();
$("button").on("click", function () {
  $(this).closest("tr").fadeOut(300);
});

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
td {
  padding: 8px;
}
thead > tr:before {
  content: '';
  display: table-cell;
}
tbody {
  counter-reset: row-number;
}
tbody > tr:before {
  counter-increment: row-number;
  content: counter(row-number);
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th>Left context</th>
      <th>Right context</th>
      <th>Delete row?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
  </tbody>
</table>