-1

私のコードhttp://jsfiddle.net/Vds69/ 行の最後にあるボタンをクリックすると、テーブルの現在の行を新しい値で変更したいと思います。行を変更するアクションを書くのを手伝ってください

HTML

<div class="row-fluid">                            
    <div class="btn-group">
        <button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
        <button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
    </div>
</div>

Jクエリ

$('.action-remove-visual-features').on('click', function() {
    console.log("action-remove-visual-features");
    $('#table-visual-features tbody').html('');
});

$('.action-add-visual-feature').on('click', function() { 
    console.log("action-add-visual-feature");  

    $('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});


$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
    console.log("action-remove-visual-feature!!");
    console.log("e action  = ", e);
    $(this).parents('tr').remove();
});
4

3 に答える 3

1

HTML5 ソリューションは、次の関数を追加することで可能です

$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
            if ($(this).hasClass("changing")) {
                var $parentRow = $(this).parents('tr').eq(0);
                $(this).removeClass("changing");
                $parentRow.removeClass("changing");
                $(this).text("edit");
                /*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
                $parentRow.find('td').attr("contenteditable","false");
            } else {
                var $parentRow = $(this).parents('tr').eq(0);
                $(this).addClass("changing");
                $parentRow.addClass("changing");
                $(this).text("stop-edit");
                $parentRow.find('td').attr("contenteditable", "true");
            }
        });

CSS

tr.changing td{
    border:1px solid green;
}

http://jsfiddle.net/Vds69/8/

それ以外の場合は、次のようなことを行う必要があります。

編集時

1. td 入力要素に追加します

2.input 要素は、td 要素のテキストから値を取得する必要があります

編集を終了する

1.入力要素から値を取得する

2.入力要素を削除します

3.値をテキストとして td 要素に設定します。

于 2013-10-18T10:24:38.567 に答える
0

このようなものがあなたが望むものであることを願っています... Juzは当分の間、いくつかの静的な値を与えました..

$('#table-visual-features tbody').on('click','.action-change',function () {
    $(this).parent().siblings('td:eq(0)').html('Visual');
    $(this).parent().siblings('td:eq(1)').html('Alpahabet');
    $(this).parent().siblings('td:eq(2)').html('123');
});

フィドル

http://jsfiddle.net/tRhHt/

于 2013-10-18T10:16:15.167 に答える