我正在测试表排序器,我的表是:
它包含产品列表,一个产品有 2 行,一行包含其名称,另一行是供用户进行更改的输入字段。
我想做一个表格排序器来对表格顶部具有空输入字段的产品进行排序。
这意味着输入字段中没有文本的产品将显示在顶部。
我正在使用 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'> </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>
最佳答案
如果您正在使用我的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> </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'
});
});
关于javascript - TableSorter 对 Td 中的空输入进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30210434/