Question

我正在测试tableorter，我的表是：

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

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

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

我正在使用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）使用输入解析器＆amp;设置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'
    });
});

TableSorter在Td中排序空输入

1 个答案: