jquery - jqueryでhtmlテーブルの行を特定の場所に挿入する

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

jQuery after（）およびbefore（）メソッドを使用できます

jQuery after（）メソッドは、選択したHTML要素の後にコンテンツを挿入します。

jQuery before（）メソッドは、選択したHTML要素の前にコンテンツを挿入します。

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

また

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

Answer 3

after()次の方法を使用できます。

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