HTML排序 - 不同表格上的標題

-1

我有下面的html表格，其中表單上的標題和另一個表格上的內容。當我單擊另一個表中的標題時，我必須對錶格排序。HTML排序 - 不同表格上的標題

我發現很多javascript的例子，只有當頭文件在同一個表中時纔有效。可以給我提供一些與我的任務相關的例子嗎？

<html> 
    <table > 
     <tr> 
      <th>Name</th> 
      <th>Salary</th> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <td>Fred</td> 
      <td>$12000.00</td> 
     </tr> 
     <tr> 
      <td>Kevin</td> 
      <td>$191200.00</td> 
     </tr> 
    </table> 
</html>

來源

2012-09-24 user1397157

我的HTML表：

名稱	工資

弗雷德$ 12000.00凱文$ 191200.00

– user1397157

得到一個例子，在jsfiddle.net去，用自己喜歡的方法JS沒有工作。保存並將鏈接返回到此處。你提供的起點越大，幫助你的越容易，因此你越有可能得到幫助。 – invertedSpear

這些東西爲什麼在不同的表格中？重做標記，以便有兩列三行的表格。 – 2012-09-24 21:54:42

如果你添加一些班列，使柱細胞和相關的頭具有相同的類名，這不是太難以利用這些其他現有的JavaScript的解決方案。

作爲一個例子，我使用這個simple JQuery sorting function並創建了this JSFiddle demo。

我修改這樣的HTML：

<html> 
    <table id="heading"> 
     <tr> 
      <th class="name-col">Name</th> 
      <th class="salary-col">Salary</th> 
     </tr> 
    </table> 
    <table id="data"> 
     <tr> 
      <td class="name-col">Fred</td> 
      <td class="salary-col">$12000.00</td> 
     </tr> 
     <tr> 
      <td class="name-col">Kevin</td> 
      <td class="salary-col">$191200.00</td> 
     </tr> 
    </table> 
</html>

請注意，我遊戲的標題名稱和所有的細胞在該列類name-col，和我做了薪酬頭和細胞，與同一類salary-col。

然後我用jQuery來點擊監聽器添加到name-col頭，其然後引發了name-col細胞排序功能：

$('th.name-col').click(function() { 
    $('td.name-col').sortElements(function(a, b){ 
     return $(a).text() > $(b).text() ? 1 : -1; 
    }, function(){ return this.parentNode; }); 
}); 

$('th.salary-col').click(function() { 
    $('td.salary-col').sortElements(function(a, b){ 
     return $(a).text() > $(b).text() ? 1 : -1; 
    }, function(){ return this.parentNode; }); 
});

在這個例子中，sortElements是在所提供的功能上面鏈接的簡單JQuery排序函數。我不是它的作者。

你會注意到這個腳本只會排序一次，但是，由於比較方向（>）是硬編碼的。一個快速正髒來實現邏輯來扭轉這種方式是這樣的：

var nameAsc = false; 
var salaryAsc = false; 

$('th.name-col').click(function() { 
    $('td.name-col').sortElements(function(a, b){ 
     if (nameAsc) { 
      nameAsc = false; 
      return $(a).text() > $(b).text() ? 1 : -1; 
     } else { 
      nameAsc = true; 
      return $(a).text() < $(b).text() ? 1 : -1; 
     } 
    }, function(){ return this.parentNode; }); 
}); 

$('th.salary-col').click(function() { 
    $('td.salary-col').sortElements(function(a, b){ 
     if(salaryAsc) { 
      salaryAsc = false; 
      return $(a).text() > $(b).text() ? 1 : -1; 
     } else { 
      salaryAsc = true; 
      return $(a).text() < $(b).text() ? 1 : -1; 
     } 
    }, function(){ return this.parentNode; }); 
});

這裏nameAsc和salaryAsc布爾變量是讓您反轉排列順序的只是一個hackish的方式。如果升序，則在比較器功能中翻轉布爾值和>的方向。這可能是一種更有效的方法，但我只是想要一個快速而骯髒的例子。

您的雙桌模型會遇到很多問題，特別是在調整列的大小時。如果數據表中單元格中的數據較長，則數據列將不再與您的標題列對齊。我強烈建議你只使用單個表格來表示標題爲和的數據。

來源

2012-09-24 22:11:40

首先，非常感謝你在這方面的時間。我嘗試了你的上面的例子。我理解了排序的概念。我認爲上面的排序示例是針對具有2行的表。對？我的表格有更多的行。我可以使用數組傳遞所有行嗎？我不知道如何傳遞數組函數...你能幫忙嗎？另外，我沒有面對任何UI頭問題，它正確排隊。 – user1397157

@ user1397157 - 上面實際上不是生產代碼，它是一個概念證明，您可以使用任何*現有的排序表函數，並通過在不同表上的點擊事件上觸發排序操作來調整它們。如果你願意，我相信你可以適應上述情況，但正如我所說，這是一個快速骯髒的例子，而不是實際使用的東西。 –

非常感謝您爲編寫所有這些內容而付出的所有努力，沒有讚揚或接受。 +1從我，@ user1397157是obvs一個幫助吸血鬼 – Liam

使用sorttable.js進行排序時，它可能會出現列對齊問題，同時點擊列頭進行排序....

<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script> 

<style> 
     th, td{ 
      padding: 3px;//important 
     } 
</style> 
<table class="sortable"> 
<tr><th>...</th></tr><tr><td>...</td</tr> 
</table>

來源

2015-01-01 07:18:36

HTML排序 - 不同表格上的標題

回答

相關問題