TableSorterフィルターウィジェットの入力にクラスを追加しますか？

Question

誰かがフィルターウィジェットの入力フィールドに一意のクラスを追加する方法について考えていますか？

表示されている既定の列と共に、ユーザーが追加または削除できる非表示の列がある動的な表が表示されました。

私は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); 
}); 

けど。 1つの非表示の列を追加または削除すると、IDがcolumn6の列はIDがcolumn5の列になり、その逆もあります。

この問題を解決する方法はありますか？フィルターウィジェットの入力には常に特定のIDまたはクラスが必要です。

おかげで...

Answer 1

あなたは、各フィルタの入力に列ごとに異なるクラス名を設定するために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.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; } 

スクリプト（input.tablesorter-filterは、特異性を増加させるために添加）

$(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 
    } 
    }); 
}); 

が