的tablesorter了TD

Question

我測試的tablesorter和我的表格排序空的輸入是：

Table

它包含的產品列表和一個產品有兩行，一行包含其名，其餘的是輸入字段供用戶進行更改。

我想做一個tablesorter排序產品的空輸入字段到表頂部。

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