Jquery 列标题中的表排序器按钮

为了提高tablesorter插件输出的可访问性，我被要求在可排序列标题中包含一个button元素

当我包含一个按钮时，该按钮不会触发任何排序操作

在

选择器排序

选项中添加“按钮”时也是如此

我修改了tablesorter演示JSFIDLE，使第一列标题包含一个

按钮

，该“按钮”已添加到

选择器排序

---

（button元素的存在应该向screenreader用户提示标题中有一个可操作的元素，因为标题本身通常是不可操作的。我知道aria label属性可以提供相关的说明，但我被告知需要更多，并且我被特别指示添加button元素。）

它内置于忽略对表标题中表单元素的单击。您可以通过更改内部正则表达式（）来覆盖它：

HTML

字母数字
数字的
动物
地点

剧本

$(function() {
  // default regex = /(input|select|button|textarea)/i;
  // remove "button" from ignored formElements list
  $.tablesorter.regex.formElements = /(input|select|textarea)/i;

  $('table').tablesorter({
    theme: 'blue',
    headerTemplate: '<button>{content}</button>{icon}',
    widgets: ['zebra', 'columns'],
    selectorSort: "th, button"
  });
});

$（函数（）{
//默认正则表达式=/（输入|选择|按钮|文本区域）/i；
//从忽略的formElements列表中删除“按钮”
$.tablesorter.regex.formElements=/（输入|选择|文本区域）/i；
$（'table'）.tablesorter({
主题:"蓝色",，
headerTemplate:“{content}{icon}”，
小部件：['zebra'，'columns']，
选择器排序：“th，按钮”
});
});

$(function() {
  // default regex = /(input|select|button|textarea)/i;
  // remove "button" from ignored formElements list
  $.tablesorter.regex.formElements = /(input|select|textarea)/i;

  $('table').tablesorter({
    theme: 'blue',
    headerTemplate: '<button>{content}</button>{icon}',
    widgets: ['zebra', 'columns'],
    selectorSort: "th, button"
  });
});