将 class 添加到 TableSorter 过滤器小部件输入？

Question

有没有人知道如何将唯一 class 添加到过滤器小部件的输入字段。

我得到了动态 table，其中包含一些隐藏的列，用户可以在他们身边添加或删除这些列以及显示的默认列。

我用 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 为 column6 的列变为 id 为 column5 的列，反之亦然。

关于如何解决这个问题有什么想法吗？我需要始终在过滤器小部件输入上输入特定 ID 或 class。

谢谢...

Answer 1

您可以使用 filter_cssFilter option 为每个过滤器输入的每列设置不同的 class 名称。

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

更新：也许包括 header 文本会更好？ (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
    }
  });
});

将 class 添加到 TableSorter 过滤器小部件输入？

Adding class to TableSorter filter widget inputs?

tablesorter

class

input

widget

filter