将列动态添加到使用 jQuery 的 tablesorter 管理的表中

Question

将列动态添加到使用 jQuery 的 tablesorter 管理的表中

在有一个由 jQuery 的 tablesorter 排序的表格的网页上，有一个功能可以动态地向表格中添加列。发生这种情况时，我调用 trigger("update") 和 trigger("appendCache") 以使 tablesorter 能够按新列排序（我也尝试再次调用 tablesorter()）。但是，在我单击标题单元格之前，用于排序的小部件不会出现在新列中。

我的问题是有人知道如何让小部件立即出现吗？感谢问候杰森

Answer 1

San*_*kha 2

   <head>

    <title>jQuery plugin: Tablesorter 2.0</title>

    <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

    <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />

    <script type="text/javascript" src="../jquery-latest.js"></script>

    <script type="text/javascript" src="../jquery.tablesorter.js"></script>

    <script type="text/javascript">

    $(function() {      

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);


    }); 
    function append(){
        var table = $("#myTable");
        $(table).remove();
        var tr = $("<tr></tr>");
        $("<td></td>").html('Test').appendTo(tr);
        $("<td></td>").html('test').appendTo(tr);
        $("<td></td>").html('test@gmail.com').appendTo(tr);
        $("<td></td>").html('$5.00').appendTo(tr);
        $("<td></td>").html('http://www.test.com').appendTo(tr);
        $(tr).appendTo(table);
        $(table).appendTo($('#tableholer'));
        $("#tableholer table").tablesorter();
    }

    </script>

</head>
<body>
    <div id="tableholer">
    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

Run Code Online (Sandbox Code Playgroud)

如果是追加的话，这会起作用。如果删除，请尝试同样的操作，但我不确定

归档时间：	15 年，1 月前
查看次数：	9550 次
最近记录：	7 年，3 月前