2

これが私が使用したマークアップです

<table cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr class="tr-head">
                <th>Amount Owed</th>
                <th>Amount Paid</th>
                <th>Check / Cash / Online</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="row0">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row0">Edit</a></td>
            </tr>
            <tr class="row1">
                <td>$10 <input type="text" name="amount_owed" id="amount_owed" value="10" style="display: none; width: 40px;" /></td>
                <td>$20 <input type="text" name="amount_paid" id="amount_paid" value="20" style="display: none; width: 40px;" /></td>
                <td>$30 <input type="text" name="check_cash_online" id="check_cash_online" value="30" style="display: none; width: 40px;" /></td>
                <td><a href="javascript:void(0);" class="edit-row" title="row1">Edit</a></td>
            </tr>
        </tbody>
    </table>

特定の行の [編集] をクリックしたときに、要素を除く最初の 3 つの子セルtdテキスト (つまり、$10、$20 など) を削除したいと考えています。input入力タイプは、セルのテキストを非表示にした後に表示する必要があります。jqueryスクリプトを使用してどのように作成できるか教えてください。ありがとう

これを行うためにいくつかのスクリプトを試しました。

$(document).ready(function(){
            $('.edit-row').click(function(){
                    var title = $(this).attr('title');
                    $('.'+title+' td').text('');
                });
        });

しかし、上記のスクリプトはセルを空にします。

4

4 に答える 4

3

このコードはあなたのために働くでしょう：

​$('.edit-row​​').click(function() {
    $(this).closest('tr').find('td').not(':last')
        .contents().filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

ここでテスト済み。

Zachary Kniebel は.contents()メソッドでヒットしました

申し訳ありませんが、入力要素が表示されている部分を忘れていました:

$('.edit-row').click(function() {
    $(this).closest('tr').find('td').not(':last').contents()
        .filter(
            function() {
                return this.nodeType != 3;
            })
        .show().parent().contents()
        .filter(
            function() {
                return this.nodeType == 3;
            }).remove();
});​

テスト済みで動作しています。

于 2012-10-26T13:39:42.007 に答える
1

jQueryの.contents()メソッドを検索します。呼び出し元の要素/コレクションのすべてのテキスト、要素、およびコンテンツノードを返します。次のようなフィルターメソッドを作成します。

var filterNodes = function() {
    return this.nodeType === 1 || this.nodeType === 3;
}

これにより、すべての要素ノードとテキストノードが返されます。そこから、テキストを削除する要素ノードを選択し、テキストノードを削除します。

注：この.contents()メソッドは、子孫ではなく子を返します

編集：

私はあなたの質問を読み直しました、そして私はこれがあなたによりよく合うと思います：

  1. td標準のjQueryセレクターを使用して最初の3つをループします

  2. 次のフィルターメソッドを実行して、テキストノードのみを取得します。

    var filterNodes = function () { return this.nodeType == 3; }

  3. 次のようにfilterメソッドを呼び出します。

    var firstThreeTDs = ....

    var nodeSet = firstThreeTDS.contents().filter(filterNodes).toArray();

    for (var i = 0; i < nodeSet.length; i++) {

        nodeSet[i].parentNode.removeChild(nodeSet[i]);`

    }

  4. .show()メソッド、.css()メソッド、またはエフェクトメソッド（フェード、スライドなど）を使用して、入力ボックスを表示します


編集2：

別の解決策がありますが、それは最善ではなく、テストされておらず、デバッグにかなりの時間がかかります（特に、実装に基づいて一部のプロパティ/属性が失われる可能性があるため）：jQueryのclone()メソッドを使用して複製することができます各の入力要素を入力し、メソッドをtd使用して、の内部HTMLをその複製された入力要素に設定します。これは良い解決策ではなく、オーバーヘッドが大きく、少し初心者ですが、DOMを手動で操作することに不安がある場合は機能します。.html()td


さらにヘルプ/説明が必要な場合はお知らせください。幸運を！:)

于 2012-10-26T13:26:59.063 に答える
0 
    $('.edit-row').click(function(){
       $(this).parents("tr").find('td').not(":last").hide().html("");
    });

http://jsfiddle.net/bLygN/2/

于 2012-10-26T13:34:42.640 に答える
0 
$('.row0 #amount_owed,.row0 #amount_paid,row0 #check_cash_online').remove();
于 2012-10-26T13:26:04.807 に答える