Question

我有一个包含价格信息的HTML表格。该表按价格升序排序。我想用新的价格项更新表。我很确定jquery应该能够解决这个问题。这是我的起点：

<table id='priceTable'>
<tr id="25607">
    <td>
        Item 1
    </td>
    <td>
        $256.07
    </td>
    <td>USD</td>
</tr>
<tr id="30100">
    <td>
        Item 2
    </td>
    <td>
        $301.00
    </td>
    <td>USD</td>
</tr>
<tr id="30557">
    <td>
        Item 3
    </td>
    <td>
        $305.57
    </td>
    <td>USD</td>
</tr>
</table>

我需要插入一个新行。

<tr id="29000">
        <td>
            Item 5
        </td>
        <td>
            $290.00
        </td>
        <td>USD</td>
    </tr>

此行需要在id为25607和id 30100之间插入。

我认为应该有办法使用tr的id（只有数字的价格）。可能会对ID进行排序并确定应插入新项目的位置。

Answer 1

是的，jQuery能够解决这个问题。

var row = '<tr id="29000"><td>Item 5</td><td>$290.00</td><td>USD</td></tr>';
var $tr = $(row);

$('#priceTable tr')
         .add($tr) // add the new tr to the collection
         .sort(function(a, b){  // sort them
             return a.id > b.id
         }) 
         .appendTo('#priceTable'); // end of the game

http://jsfiddle.net/PTxjk/

Answer 2

您可以使用after()方法：

$('#25607').after("<tr id='29000'>....");

Answer 3

您可以在（）和（）方法之后使用jQuery

jQuery after（）方法在选定的HTML元素之后插入内容。

jQuery before（）方法在选定的HTML元素之前插入内容。

$('#25607').after("<tr id='29000'>....");

或

$('#30100').before("<tr id='29000'>....");

使用jquery将html表行插入到特定位置

3 个答案: