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

但是，有一个问题。当我添加一个隐藏列或删除一个列时，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添加以增加特异性）

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

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

1 个答案: