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

Question

我正在测试表排序器，我的表是:

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演示中使用的文件实际上指向存储库的 master 分支。

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'
    });
});