使用jQuery将HTML表格行插入到特定位置 [英] Insert html table row to a specific location with jquery

问题描述

我有一个包含价格信息的HTML表.该表按价格升序排序.我想用一个新的价格项目更新表格.我很确定jquery应该能够解决这个问题.这是我的出发桌:

I have a HTML table that contains price information. The table is sorted be price Ascending. I'm looking to update the table with a new price item. I'm pretty sure jquery should be able to solve this issue. Here is my starting table:

<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之间.

This row needs to be inserted between the with id 25607 and id 30100.

我在想应该有一种使用tr的ID的方法(哪个价格只有数字).可能对ID进行排序，并弄清楚应该在哪里插入新项目.

I'm thinking that there should be a way to use the id of the tr's (Which are the prices with only numbers). Possibly sort the ids and figure out where the new item should be inserted.

推荐答案

是的，jQuery能够解决此问题.

Yes, jQuery is able to solve this issue.

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/

这篇关于使用jQuery将HTML表格行插入到特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！