TableSorter 对 Td 中的空输入进行排序

Question

我正在测试 tablesorter，我的桌子是：

Table

它包含产品列表，一个产品有2行，一行包含其名称，另一行是用户进行更改的输入字段。

我想做一个表格排序器，将带有空输入字段的产品排序到表格顶部。

Table Expected Result

这意味着输入字段中没有文本的产品将显示在顶部。

我正在使用 tablesorter jquery。

我的 HTML 表格：Tr1 保存第一个“数据”行，TR2 保存输入字段；

<table class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-inputs empty-top code">Code</th>
            <th class="sorter-inputs empty-top designation">Designation</th>
        </tr>
    </thead>
    <tbody>
        <tr class='tr1'>
            <td>
                <div class='code'>&nbsp;</div>
            </td>
            <td>
                <div class='designation'>abc 111</div>
            </td>
        </tr>       

        <tr class='tr2'>
            <td>
                <input type="text" class='CodeInput'/>
            </td>
            <td>
                <input type="text" class='designationInput'/>
            </td>
        </tr>

    ...
    </tbody> </table>

Answer 1

如果您使用我的fork of tablesorter，您有两种选择。

1) 省略输入行并使用editable widget，这实际上使表格单元格可使用contenteditable 进行编辑。这确实需要现代浏览器。

2) 使用输入解析器并设置 emptyTo 选项以将空行保留在顶部 (demo)

注意：演示中使用的parser-input-select.js 文件实际上是指向存储库的主分支。

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-inputs empty-top code">Code</th>
            <th class="sorter-inputs empty-top designation">Designation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>&nbsp;</div>
                <input type="text" />
            </td>
            <td>
                <div>abc 111</div>
                <input type="text" />
            </td>
        </tr>
    ...
    </tbody>
</table>

* 注意 *：我不认为在这种情况下使用子行会起作用，因为排序会根据父行内容进行。所以我在每个带有标签的单元格中添加了<div>。

CSS

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.code { width: 20%; }
.designation { width: 80%; }
input { width: 90%; margin: 4px; background: #fc7565; border: solid 1px #999; }
table { border-collapse: collapsed; border-spacing: 0; }
.tablesorter-blue tbody td { padding: 0; vertical-align: bottom; }
td div { background: #ccc; padding: 4px; }

脚本

$(function () {
    $('table').tablesorter({
        theme: 'blue'
    });
});