jQuery的表選機不適合我

Question

工作這是我的HTML表格和jQuery臺分揀機是不是爲我工作：

<table id="pendingForDownldTable" class="table" cellspacing="1"> 
    <thead> 
    <tr> 
     <th width="2%"><input type="checkbox" name="" id="" /></th> 
    <th width="10%">ECN No.</th> 
    <th width="12%">CN Date</th> 
    <th width="14%">Broker Name</th> 
    <th width="14%">Security Name</th> 
    <th width="4%">Quantity</th> 

    <th width="5%">Trade Type</th> 

    </tr> 
    </thead> 
    <tbody> 
    <logic:notEmpty name="pendingDownloadForm" property="pendingForDownldECNList"> 
     <logic:iterate id="rows" name="pendingDownloadForm"                

    <tr> 
      <td><input type="checkbox" name="" id="" /></td> 
       <td class="ecnNo"><a href=#                


      </td> 
      < td><bean:write name="rows" property="ecnDate" /></td> 
      <td><bean:write name="rows" property="brokerName" /></td> 
       <td><bean:write name="rows" property="companyName" /></td> 
       <td><bean:write name="rows" property="quantity" /></td> 
      <td id="mktType"><bean:write name="rows" property="mktType" /> 
     </td> 
     <td><bean:write name="rows" property="settlementNumber" /></td> 
      <td><bean:write name="rows" property="schemeName" /></td> 




      <td><bean:write name="rows" property="custodianName" /></td> 
      <td><bean:write name="rows" property="signStatus" /></td> 
      <td id="tradeType"><bean:write name="rows" property="tradeType" /></td> 
      </tr> 
     </logic:iterate> 



      </logic:notEmpty> 

      <logic:notEmpty name="pendingDownloadForm" property="equityCnList"> 

      <logic:iterate id="rows1" name="pendingDownloadForm" property="equityCnList" > 

       <tr> 
       <td><input type="checkbox" name="" id="" /></td> 
      <td><a href=#             


      </td> 
      <td><bean:write name="rows1" property="ecnDate" /></td> 
      <td><bean:write name="rows1" property="brokerName" /></td> 
      <td><bean:write name="rows1" property="companyName" /></td> 
     <td><bean:write name="rows1" property="quantity" /></td> 
      <td><bean:write name="rows1" property="mktType" /></td> 
     <td><bean:write name="rows1" property="settlementNumber" /></td> 
      <td><bean:write name="rows1" property="schemeName" /></td> 
      <td><bean:write name="rows1" property="custodianName" /></td> 
      <td><bean:write name="rows1" property="signStatus" /></td> 
     </tr> 
    </logic:iterate> 
     </logic:notEmpty> 
     </tbody> 
     </table>` 

這是我的jQuery函數

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#pendingForDownldTable").tablesorter(); 
}); 
</script> 

Answer 1

首先你有幾個破損的DOM元素，例如td和a標籤，我打算縮進你的代碼，發現關閉表格標籤是非常重要的。

//this is a no no 
<td><a href=#             


     </td> 

二，如果你有問題造型的答案是表缺少類tablesorter或CSS spritesheets，我們需要往往是：

<!-- blue theme --> 
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" /> 

完整的HTML：

<table id="pendingForDownldTable" class="tablesorter" cellspacing="1"> 
<thead> 
    <tr> 
     <th width="2%"> 
      <input type="checkbox" name="" id="" /> 
     </th> 
     <th width="10%">ECN No.</th> 
     <th width="12%">CN Date</th> 
     <th width="14%">Broker Name</th> 
     <th width="14%">Security Name</th> 
     <th width="4%">Quantity</th> 
     <th width="5%">Trade Type</th> 
    </tr> 
</thead> 
<tbody> 
    <logic:notEmpty name="pendingDownloadForm" property="pendingForDownldECNList"> 
     <logic:iterate id="rows" name="pendingDownloadForm"> 
      <tr> 
       <td> 
        <input type="checkbox" name="" id="" /> 
       </td> 
       <td class="ecnNo"> <a href="#"></a> 
       </td> 
       <td> 
        <bean:write name="rows" property="ecnDate" />1 
       </td> 
       <td> 
        <bean:write name="rows" property="brokerName" />test broker 
       </td> 
       <td> 
        <bean:write name="rows" property="companyName" /> 
       </td> 
       <td> 
        <bean:write name="rows" property="quantity" /> 
       </td> 
       <td id="mktType"> 
        <bean:write name="rows" property="mktType" /> 
       </td> 
       <td> 
        <bean:write name="rows" property="settlementNumber" /> 
       </td> 
       <td> 
        <bean:write name="rows" property="schemeName" /> 
       </td> 
       <td> 
        <bean:write name="rows" property="custodianName" /> 
       </td> 
       <td> 
        <bean:write name="rows" property="signStatus" /> 
       </td> 
       <td id="tradeType"> 
        <bean:write name="rows" property="tradeType" /> 
       </td> 
      </tr> 
     </logic:iterate> 
    </logic:notEmpty> 
    <logic:notEmpty name="pendingDownloadForm" property="equityCnList"> 
     <logic:iterate id="rows1" name="pendingDownloadForm" property="equityCnList"> 
      <tr> 
       <td> 
        <input type="checkbox" name="" id="" /> 
       </td> 
       <td> <a href="#"></a> 
       </td> 
       <td> 
        <bean:write name="rows1" property="ecnDate" />2 
       </td> 
       <td> 
        <bean:write name="rows1" property="brokerName" />broker test 
       </td> 
       <td> 
        <bean:write name="rows1" property="companyName" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="quantity" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="mktType" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="settlementNumber" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="schemeName" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="custodianName" /> 
       </td> 
       <td> 
        <bean:write name="rows1" property="signStatus" /> 
       </td> 
      </tr> 
     </logic:iterate> 
    </logic:notEmpty> 
</tbody> 
</table>` 

腳本部分大約是一樣的，你已經只是確保每一個興包括

全部工作FIDDLE：http://jsfiddle.net/Q6FLN/2/