按包含標記的列對錶格行進行排序

我使用tablesorter JQUery插件通過單擊列來對HTML表格的行進行排序。在大多數情況下，表格單元格包含簡單的標記，如<td>hello</td>，因此默認行爲可以正常工作。按包含標記的列對錶格行進行排序

但是，表中的一列包含這樣

<td> 
    <a id="1" class="festivalSubscribe " action="create" 
    controller="festivalSubscription" onclick="/* Lots of Javascript */">Not Subscribed 
    </a> 

    <a id="1" class="festivalUnsubscribe hide" action="delete" 
    controller="festivalSubscription" onclick="/* Lots of JavaScript */">Subscribed 
    </a> 
</td>

此列中的每個單元包含兩個鏈接的細胞（如上述），其中之一將始終是不可見的（一個與hide類）。我想按可見鏈接文本（「未訂閱」或「訂閱」）對此列進行排序。

該插件提供了選項來定義a function，其結果將用於確定如何對列進行排序，例如，

textExtraction: function(node) { 
    // extract data from markup and return it 
    return node.childNodes[0].childNodes[0].innerHTML; 
}

但是，我無法找到一個方法來定義這個函數，它將正確排序的簡單情況<td>hello</td>和上述更復雜的情況。

來源

2012-01-11 Dónal

也許.innerText，所以你只能得到實際的文字內容而不是標籤？ – 2012-01-11 15:28:41

我想要的是哪個鏈接的文本不是'hide'類的成員，但我不知道如何在JQuery中表達該內容 – 2012-01-11 15:38:34

但是，對於大多數現代瀏覽器，您可以使用'node.textContent'一些較舊的瀏覽器必須使用'node.innerText'。 – 2012-01-11 15:45:23

試試這個，它應該處理其子的兩種情況元素和沒有子元素：

textExtraction: function(node) { 
    // extract data from markup and return it 
    var $node_a = $(node).find("a"); 
    if ($node_a.length) { 
    return $node_a.filter(":visible").text(); 
    } 
    // normal case 
    return node.innerHTML; 
}

來源

2012-01-11 15:49:05

試試這個：

textExtraction: function(node) { 
    return $('td :not(.hide)', node).text(); 
}

來源

2012-01-11 15:43:17 Krzysztof

你可以抓住的節點內發現第一個可見的元素，並使用該從中提取文本：

$(node).find(':visible:eq(0)').text();

來源

2012-01-11 15:44:57

我覺得@Kevin B的答案是最好的ori ginal插件，但我想補充一點，我已將github上的原始插件的副本分叉並添加了textExtraction選項的功能以允許指定列。所以這是可能的。

$("table").tablesorter({ 

    // Define a custom text extraction function for each column 
    // default extraction is obtained like this: `$(node).text()` 
    textExtraction: { 
    0: function(node) { 
     return $(node).find("a:visible").text(); 
    } 
    } 
});

來源

2012-01-11 16:10:55 Mottie

這是一個不錯的改進。我很驚訝這個功能在原版中沒有。 – 2012-01-11 16:17:29

按包含標記的列對錶格行進行排序

回答

相關問題