將類添加到TableSorter過濾器小部件輸入？

有沒有人有關於如何添加唯一類到過濾器小部件的輸入字段的想法。將類添加到TableSorter過濾器小部件輸入？

我得到了一些隱藏列的動態表，用戶可以在列表中添加或刪除默認列。

我設法用jQuery做到：

$("#table tr td > input").each(function(i) { 
$(this).attr('id', 'column' + i); 
$(this).append('<input id=\"column' +i+'\"></input>'); 
var script=document.createElement('script'); 
script.type='text/javascript'; 
$(this).find('input').append(script); 
});

，但是，有一個問題。當我添加一個隱藏的列或刪除一個，具有id列的列6成爲具有列5的id列，反之亦然。

關於如何解決此問題的任何想法？我始終需要特定的ID或類在過濾器小部件輸入。

謝謝...

來源

2016-11-16 Novakinify

可以使用filter_cssFilter option設置每列不同的類名在每個過濾器輸入。

$(function(){ 
    $("table").tablesorter({ 
    widgets: [ "filter" ], 
    widgetOptions: { 
     // css class applied to the inputs within the filter row 
     // string (applied to all), array (applied to individual) 
     filter_cssFilter: [ "filter0", "filter1", "filter2" ] // etc... 
    } 
    }); 
});

更新：可能包括標題文本會更好地工作？（demo）

CSS（input.tablesorter-filter以增加特異性）

input.tablesorter-filter.filter-AlphaNumeric { border-color: red; } 
input.tablesorter-filter.filter-Numeric { border-color: green; } 
input.tablesorter-filter.filter-Animals { border-color: blue; } 
input.tablesorter-filter.filter-Sites { border-color: purple; }

腳本

$(function() { 

    var filterArray = []; 
    $('thead th').each(function(){ 
    filterArray.push('filter-' + $(this).text().replace(/\s/g,"-")); 
    }); 

    $('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_cssFilter: filterArray 
    } 
    }); 
});

有

來源

2016-11-17 02:08:11 Mottie

半路上：d，這工作，但，當我右前加一些隱藏的列列，我需要唯一的ID，所以我可以針對該過濾器輸入，添加列代替舊列。例如：我需要第8列使用唯一的ID filter8，我在該列之前添加一列，現在添加的列使用ID filter8，而我需要的列使用ID列9。謝謝... – Novakinify

O.K.也許我做錯了。我想實現的很簡單。我想要有精確的匹配，比如當你用「（引號）」和「filter」同時搜索時，所以$符號被忽略。在頭中添加filter-exact和filter-parsed類將不會像在過濾器輸入中搜索「（引號）。我想在一些列上實現此功能，而不是所有列。謝謝... – Novakinify

我已經更新了我的答案。我們通過電子郵件討論了「filter-exact」和「filter-parsed」，所以其他人可能會對此感到困惑。無論如何，請改用['filter_defaultFilter'選項]（https://mottie.github.io/tablesorter/docs/#widget-defaultfilter）。 – Mottie

將類添加到TableSorter過濾器小部件輸入？

回答

相關問題