Chrome 扩展 jQuery 表格排序器覆盖标签内容现有的表格排序器 JS

Question

我现在正在做一个 Chrome 扩展。 原因，这个扩展会修改一个TAB表的内容，然后需要求助。

经过研究，发现jQuery tablesorter并没有对本地扩展脚本更新的Modified表进行排序。

我可以执行 $('table').trigger('update') 然后使用 tablesorter 重建表 IF 我在 TAB 内容脚本中执行此操作。

但事实是，我的脚本处于隔离环境中，无法访问内容脚本变量或函数或对象。

如果我在扩展脚本中重建表格排序器，表格将响应两次，这很愚蠢。

我能做些什么来解决这个问题。谢谢。梅森。

---

@Darin，我试过你的观点
它不起作用。

$("#xftw").after($("#pio").clone(0, 0));
$("#pio").eq(0).empty();


$("#pio").tablesorter({
    headers: {
        0: {
            sorter: false
        },
        2: {
            sorter: false
        },
        6: {
            sorter: "digit"
        },
        10: {
            sorter: false
        }
    },
    sortInitialOrder: "desc",
    sortList:[[7,1]],
    textExtraction: function (node) {
        if ($(node).attr("extraction") == "my") return "0" + $(node).find("span").text();
        var $firstNode = $(node).find(":first-child");
        return $firstNode.length <= 0 ? $(node).html() : $firstNode.html()
    },
    debug:true
});

var usersTable = $("#pio");
usersTable.trigger("update")
  .trigger("appendCache")
  .trigger("sorton", [[[6,1], [7,1]]]);

Answer 1

重建表格，隐藏原始表格，设置您控制的新表格。

或者当你.trigger时使用.preventDefault()

或者更改表格的id 或classname 然后对其进行处理，然后.trigger

---

一些基于旧表创建新表的粗略代码。

function copyTable(){
  var newTRs = [];
  var theTable = $(#tableID);
  var theRows = theTable.getElementsByTagName('tr');

  for (var i=0; i < theRows.length; i++){
    //you could also evaluate each row here and manipulate it as needed.
    newTRs.push(theRows[i].cloneNode(true));
  }
  return newTRs;
}

function buildNewTable(){
    var allRows = copyTable();
    var newTable = document.createElement('table');

    newTable.appendtherows(allRows);
    oldTable.attr('display','none');//or use a .class to hide old table
    $(newTable).appendTo(oldTablesDiv);
}