使用jQuery/纯JavaScript重排动态表格遇问题求助

嘿，我来帮你搞定这三个表格重排的问题！咱们逐个拆解解决：

1. 移除每次执行新增的多余<tr>元素 #

原方案大概率是在拼接HTML或克隆节点时生成了空行。修复核心是精准筛选有效行+清空后重新添加，避免拼接错误：

// 示例：按第一列文本排序重排表格
function rearrangeTable(tableSelector) {
  const $tbody = $(tableSelector).find('tbody');
  // 过滤掉空行（确保只处理包含单元格或文本的行）
  const $validRows = $tbody.find('tr').filter(function() {
    return $(this).find('td').length > 0 || $(this).text().trim() !== '';
  }).clone(true); // 深克隆，保留行上绑定的事件

  // 自定义排序逻辑（这里以第一列文本升序为例）
  $validRows.sort(function(a, b) {
    const textA = $(a).find('td').eq(0).text().trim().toLowerCase();
    const textB = $(b).find('td').eq(0).text().trim().toLowerCase();
    return textA.localeCompare(textB);
  });

  // 先清空tbody，再添加处理后的有效行，彻底避免空行
  $tbody.empty().append($validRows);
}

调用方式：rearrangeTable('#example');

2. 确保仅对单个表格生效（避免表格消失） #

之前表格消失的问题，基本是操作时误移除了表格或tbody节点。上面的函数通过精准定位目标表格的tbody，只操作其内部行结构，不会触碰整个表格：

• 给目标表格添加唯一ID（比如<table id="example">）
• 调用时传入#example作为选择器，函数只会处理这个表格的tbody内容，完全不会影响其他表格或当前表格的整体结构。

3. 兼容Internet Explorer浏览器 #

IE对ES6+语法（箭头函数、const/let等）支持极差，同时高版本jQuery也不再兼容IE。修复方案如下：

① 改用ES5兼容代码 #

// IE兼容版重排函数
function rearrangeTable(tableSelector) {
  var $tbody = $(tableSelector).find('tbody');
  var $validRows = $tbody.find('tr').filter(function() {
    return $(this).find('td').length > 0 || $.trim($(this).text()) !== '';
  }).clone(true);

  // IE下替换localeCompare为基础字符串比较，避免兼容性问题
  $validRows.sort(function(a, b) {
    var textA = $.trim($(a).find('td').eq(0).text()).toLowerCase();
    var textB = $.trim($(b).find('td').eq(0).text()).toLowerCase();
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
  });

  $tbody.empty().append($validRows);
}

② 引入IE兼容的jQuery版本 #

确保页面引入的jQuery版本支持IE（1.x支持IE6-8，2.x支持IE9+）：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

测试小提示 #

先在Chrome/Firefox等现代浏览器验证功能正常，再切换到IE测试兼容性；同时检查表格HTML结构是否规范，避免出现无内容的空<tr>干扰筛选逻辑。

内容的提问来源于stack exchange，提问作者Emerich S.