0

我在通过单击列名对表中的数据进行排序时遇到问题。我为此尝试了许多解决方案。但问题是，当我使用 javascript insertRow() 方法向表中添加行时，它似乎工作正常。插入新行后，当我单击任何列时，旧数据只会被排序，而我通过 javascript 插入的新行会消失。这是代码：您可以在此链接http://www.allmyscripts.com/Table_Sort/中找到 gs_sortable.js 文件

<script type="text/javascript">
        var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');              
    </script>
    <title>JSP Page</title>
</head>
<body><h3 align="center" >
    </h3><table class="table-autosort" width="100%"> <table id="my_table">
            <thead>
                <tr>
                    <th width="25%">Product</th>
                    <th width="25%">Date</th>
                    <th  width="25%">Price per unit</th>
                    <th width="25%">Units sold</th>
                </tr>
            </thead>
            <tr>
                <td width="25%" >Item A</td>
                <td width="25%">14/5/2012</td>
                <td width="25%">$28</td>
                <td width="25%"> 1</td>
            </tr>
            <tr>
                <td width="25%"> Item B</td>
                <td width="25%">14/5/2012</td>
                <td width="25%">$35</td>
                <td width="25%">1</td>

            </tr>
            <tr>
                <td width="25%">Item A</td>
                <td width="25%">13/5/2012</td>
                <td width="25%">$25.15</td>
                <td width="25%">20</td>
            </tr>
            <tr>
                <td width="25%">Item C</td>
                <td width="25%">15/5/2012</td>
                <td width="25%">$20</td>
                <td width="25%">100</td>
            </tr>
        </table>
        <button type="button" onclick="displayResult()">Insert new row</button>
    </table>

</body>

当我单击列标题时，我希望新行位于排序列表中。

谢谢

4

1 回答 1

0

这是一个解决方案http://jsfiddle.net/GbGx5/4/的工作小提琴

导入的事情是在调用 insertRow 之后，用 tsort 重新注册表数据，否则 tsort 中缓存的数据将只包含旧的表数据。

为此，请调用以下方法（如将脚本与动态加载的表一起使用 http://www.allmyscripts.com/Table_Sort/#example下的文档中建议的那样）

// Make sure we refresh the TSort_Data Array!
TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
tsRegister();
tsSetTable('my_table');
tsInit();

该示例的完整 JavaScript 如下...

var TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');              

function insertNewRow() {
    var table=document.getElementById("my_table"),
        newRowIndex = table.getElementsByTagName('tr').length,
        row=table.insertRow(newRowIndex),
        cell1=row.insertCell(0),
        cell2=row.insertCell(1),
        cell3=row.insertCell(2),        
        cell4=row.insertCell(3);

    cell1.innerHTML = "New Item";
    cell2.innerHTML = "15/10/2013";
    cell3.innerHTML = "$5";
    cell4.innerHTML = 51;    

    // Make sure we refresh the TSort_Data Array!
    TSort_Data = new Array ('my_table', 's', 'd', 'c', 'i');
    tsRegister();
    tsSetTable('my_table');
    tsInit();    
}
于 2013-10-15T13:33:31.797 回答