0

サーバーから JSON 形式で送信されたデータが取り込まれるテーブル テンプレートがあります。テンプレートのコードは次のとおりです。

<table id="mangeDataTable" class="tablesorter">

            <thead>
                <tr>
                    <th >S.No</th>
                    <th >Manga</th>
                    <th >Status</th>
                    <th > Edit</th>
                    <th> Delete</th>

             </tr>
            </thead>
            <tbody>
            <% for (var i = 0; i < mangaData.length; i++) { %> <% var item =mangaData[i]; %>
            <% var count=i%>

                <tr>
                <td><%= ++count%></td>
                <td><%= item.text%></td>
                <td><%= item.status%></td>
                <input id="mangaName" type="hidden" name="text" value="<%= item.text%>"/>
                <td><a href="#edit-box"  class="edit-window" title="<%= item.text%>" >Edit</a></td>
                <td><a href="#delete-box"  class="delete-window" title="<%= item.text%>" >Delete</a></td>

            </tr>
             <% } %>
             </tbody>
        </table>

上記のテンプレートを使用して、下の画像のようなテーブルを作成できます。 マンガデータテーブル

問題は、編集と削除の機能にあります。編集・削除のクリックで行のデータ（マンガ名、ステータス）を取得したい。今までアンカータグのtitle属性に名前を設定し、jquery att()で抽出していました。

var mangaName=$(this).attr("title");

しかし、これは物事を行う方法ではありません。それは私が選んだ一時的な解決策に過ぎませんでした。それを行う方法に関する提案はありますか？

4

3 に答える 3

1

リケシュ、

jQuery.closest()はここでのあなたの親友です。

$('#mangeDataTable').on('click', '.edit-window', function(){
    var row = $(this).closest('tr');
    var mangaName = row.find('td').eq(1).text();
    //then do whatever is necessary to edit
}).on('click', '.delete-window', function(){
    var row = $(this).closest('tr');
    var mangaName = row.find('td').eq(1).text();
    //then do whatever is necessary to delete
});

の中に浮かんでいるが<input>、中に浮かんで<tr>いないの<td>はおそらく良い考えではありません。ブラウザがこれをどのように処理するかは不明であり、少なくとも一部のブラウザでは要素をアドレス指定できないと思います。

于 2012-10-04T19:06:47.997 に答える
1

すでに jQuery を使用しているため、datatables プラグインを使用してデータを表示および編集することをお勧めします。セットアップと使用は比較的簡単です。

メインページ: http://datatables.net/examples/

ここにあなたの説明に一致する例があります： http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

于 2012-10-04T18:34:15.283 に答える
0

のデータ属性にタイトルを入れて、<tr>それclosestを見つけます。HTML テンプレートは次のようになります。

<tr data-title="<%= item.text %>">
    <!--...-->
</tr>

次に、編集および削除ハンドラーは、次のようにタイトルを見つけることができます。

var title = $(this).closest('tr').data('title');
// Or even $(this).closest('[data-title]').data('title') for more future-proofing

次にtitle、編集リンクと削除リンクの属性を本来の目的で使用できます (つまり、リンクの機能に関する追加情報をユーザーに提供するため)。

<td>
    <a ... title="Edit <%= item.text%>">Edit</a>
</td>
<td>
    <a ... title="Delete <%= item.text%>" >Delete</a>
</td>
于 2012-10-04T19:04:11.460 に答える