0 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">
              <tr>
                <th><a href="#" class="sortby">Full Name</a></th>
                <th><a href="#" class="sortby">City</a></th>
                <th><a href="#" class="sortby">Country</a></th>
                <th><a href="#" class="sortby">Status</a></th>
                <th><a href="#" class="sortby">Education</a></th>
                <th><a href="#" class="sortby">Tasks</a></th>
              </tr>
    <div class="dynamicData">
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
              </tr>
              </tr>
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
           </tr>
    </div> 
</table>

タグ"sortby"の一部であるクラスルとのリンクをクリックすると、テーブルの行を更新するという考え方です。th table

div を挿入しようとしましたが、うまくいきません。これを 2 つのテーブルに分割することは、両方のテーブル セルの幅が互いに追従していないため、適切な解決策ではありません。他の解決策はありますか？

4

4 に答える 4

2

更新が必要なtrsをtbodyタグに入れ、ヘッダーをタグに入れますthead。

tbody標準のjQueryを使用してtrsを追加/削除できます。

これを実行する既存のjQueryプラグインの山と山を調べることをお勧めします（編集：このタイプのことを実行します-動的データの並べ替え）。残念ながら、現時点ではオフラインになっているため、リンクを提供できません。

編集：

trs =データの行、すなわち：

        <tr>
            <td>Firstname Lastname</td>
            <td>Los Angeles</td>
            <td>USA</td>
            <td>Married</td>
            <td>High School</td>
            <td>4</td>
       </tr>

私はそれがあなたのAJAXリクエストが返すタイプのものだと思いました。

于 2010-06-02T19:31:45.067 に答える
2

div実際、テーブル内に s を含めることはできません。いくつかのテーブル行を返す AJAX リクエストを作成し、それらの行をテーブルに挿入したいという考えはありますか? もしそうなら、これはどうですか：

$.get('...', function(data) {
    $('.list tr:not(:has(.sortby))').remove().after(data);
});

つまり、不要な行を見つけて削除し、必要なものを挿入します。

于 2010-06-02T19:30:08.973 に答える
1

並べ替えには、行を直接シャッフルしてみてください。

行0を行1の下に移動します。

$("table.list tr").eq(0).insertAfter($("table.list tr").eq(1))

最後に新しい行を挿入すると、次のようになります。

$("<tr>Content</tr>").insertAfter($("table.list tr:last"))

行の削除：

$("table.list tr").eq(1).remove()

一度に複数の変更を行う場合は、jQueryを使用してDOMの外部に新しいテーブルを作成することを検討する必要があります。次に、古いテーブルを1回で置き換えます。DOMへの変更は少ないほど良いです。

于 2010-06-02T19:54:44.060 に答える
0

通常のjQueryを使用して、データの新しい行を追加したり、不要な行を削除したりできます。

並べ替えの仕組みによっては、このプラグインが代替手段になる可能性があります。これにより、テーブルを列でフィルタリングできるようになります。
http://tomcoote.co.uk/code-bank/jquery-column-filters/

于 2010-11-04T20:39:47.707 に答える