2

データベース挿入後にjQueryを使用してテーブルに行を挿入しています。ページが読み込まれると、テーブルは特定のセルでアルファベット順に並べられます（以下を参照）。jQueryを使用して新しい行を挿入するときは、アルファベット順にも挿入できるようにしたいと思います。

たとえば、次のよう<tbody>な要素を持つテーブルがあります。

<tbody>
    <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
        <td width="25px"><a class="docEditLink docAdminFormSubmit" name="38" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="38" /></td>
        <td>Document A</td>
        <td>Description of Document A</td>  
    </tr>
    <tr class="docClassesRow noClasses">
        <td colspan="4">
            <strong>No classes are currently associated with this document.</strong>
        </td>
    </tr>
</tbody>
<tbody>
    <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
        <td width="25px"><a class="docEditLink docAdminFormSubmit" name="35" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="35" /></td>
        <td>Document B</td>
        <td>Description of Document B</td>
    </tr>
    <tr class="docClassesRow">
        <td></td>
        <td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-35" /></td>
        <td width="200px">CLASS111</td>
        <td width="600px">Description of CLASS101</td>
    </tr>
    <tr class="docClassesRow">
        <td></td>
        <td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-35" /></td>
        <td width="200px">CLASS333</td>
        <td width="600px">Description of CLASS333</td>
    </tr>
</tbody>
<tbody>
    <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
        <td width="25px"><a class="docEditLink docAdminFormSubmit" name="46" href="#">Edit</a></td>
        <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="46" /></td>
        <td>Document D</td>
        <td>Description of Document D</td>
    </tr>
    <tr class="docClassesRow noClasses">
        <td colspan="4">
        <strong>No classes are currently associated with this document.</strong>
        </td>
    </tr>
</tbody>

現在、特定のドキュメントに新しいクラス行を挿入するときは関数<tbody>を使用し、新しいドキュメントを挿入するときはを使用します。.append().after()

jQueryを使用して、クラス番号またはドキュメント名にアルファベット順にクラスまたはドキュメントを挿入できるようにしたい（挿入される内容に応じて）。

たとえば<tbody>、ドキュメントCに新しいクラスを挿入したり、クラス番号CLASS222の新しいクラスをドキュメントBに追加したりできるようにします。

これどうやってするの？

更新： ドキュメントの1つに新しいクラスを挿入するために現在使用しているコードは次のとおりです。

    newClassesRows += $('#docsTable a[name="' + docID + '"]').closest('tr').after('<tr class="docClassesRow">' +
    '<td></td>' +
    '<td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="' + classID + '-' + docID + '" /></td>' +
    '<td width="200px">' + classNumber + '</td>' +
    '<td width="600px">' + className + '</td>' +
'</tr>');

ご覧のとおり、正しいドキュメントはで見つかります$('#docsTable a[name="' + docID + '"]').closest('tr')。したがって、選択した行の3番目のtd要素を調べ、テキストを確認して、変数classNumberが他のclassNumberとアルファベット順に一致する場所を特定する必要があります。

4

2 に答える 2

2

これがあなたのために働くかもしれないアプローチです（テストされておらず、私の頭の上から離れています）。これは、メイン ヘッダーの「ドキュメント」行にのみ適用されますが、うまくいく場合は、内側の行にもこのアイデアを適用できると確信しています。

まず、上記のパターンに適合する「ドキュメント」行を作成する便利な関数です。おそらく、これらの行を生成するための何かがすでにあると思います。

var makeDocRow = function(name, description) {
    return $('<tbody><tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">\
        <td width="25px"><a class="docEditLink docAdminFormSubmit" name="whatever" href="#">Edit</a></td>\
        <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="whatever" /></td>\
        <td>' + name + '</td>\
        <td>' + description + '</td>\
    </tr></tbody>');
};

次に、新しい文書行を追加する関数:

var addDocRow = function(name, description) {
  var counter = 0; // so we know when we've reached the end
  // assumes it's already sorted
  $('#main').find('tr.docRow').each(function() {
    counter++;
    if ($(this).find('td:eq(2)').html() >= name) { 
    /* Have we found the right slot for the new document by name?
       td:eq(2) refers to the table cell containing the name for comparison
       Assumes the table is always sorted to start */
      $(this).parent().before(makeDocRow(name, description)); // build/add row
      return false; // break out of each() since we're done
    }

    // Handle case where we've reached the end, but we're still in the loop.
    // This means the new row is alphabetically last, so insert after
    if ($(this).closest('table').find('tr.docRow').length === counter ) {
      $(this).parent().after(makeDocRow(name, description));
    }
  });
};

そして、あなたのコードで、新しい行を挿入したいとき:

addDocRow('Document C','Document C Description');
addDocRow('Document Z','Document Z Description');

これは確かに改善される可能性があり、テストされておらず、私の頭の上から外れていますが、おそらく役立つでしょう.

編集：それをフィドルに投げました。うまくいくようです。http://jsfiddle.net/redler/fhkWT/

于 2011-06-21T19:09:25.710 に答える
0

これは、以前のプロジェクトの 1 つで行った 1 つのアプローチです。

行を tbody に追加するだけです。各行にインデックスをデータ属性として付与します。以下に示すように、オブジェクトの任意の配列の形式で、テーブルを並べ替える列のデータ値を取得します。

var trs = [['data', 0], ['data', 1]];//0, 1 are the row indexes before sort.

カスタムソートメソッドを提供して、この配列をソートします。ソート後、この配列をループして、行を同じテーブルに追加できます。

var tbody = $('tbody', fromYourTable);
$.each(trs, function(index, tr){
      //find the row by using tr[1] which contains the index in the unsorted table
      tbody.append(tbody.find('tr[index="'+tr[1]+'"]'));
});
于 2011-06-21T19:26:46.523 に答える