javascript - テーブルから行を追加/削除

Question

ここで Twitter Bootstrap にテーブルを作成しました

2つのことができるようになりたい

1. 削除アイコンを押して行を削除 - その行を削除します

2. テキスト (名前) を入力フィールドに追加し、[新しい行を追加] を押して、新しい名前を追加します。

デモ- http://jsfiddle.net/qxdz4/2/

JavaScript / jQueryでこれを行う方法を探しています

マイコード

<div class="input-prepend input-append"><span class="add-on"><i class="icon-picture"></i></span>

<input class="span2"
id="appendedInputButton" type="text" placeholder="Add New Name Here">
<button class="btn" type="button">Add New Row</button>
</div>
<table id="users" class="table table-bordered table-condensed">
<tr>
    <th>name</th>
    <th></th>
</tr>
<tr>
    <td><a href="#" data-pk="1">Mike</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="2">John</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="3">Mary</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
</table>

ノート

• 削除ボタンをクリックすると、行が削除されます
• 入力フィールドに入力して「新しい行を追加」ボタンを押すと、名前が入力された新しい行がテーブルの最後に追加されます。

Answer 1

これを行うと、行を簡単に削除できます。

$('td.taskOptions a.tip-top').on('click', function(e) {  
    e.preventDefault();
    $(this).tooltip('hide');
    $(this).parents('tr').remove();
});

同様に、新しい行を追加するには、次のようにします。

$('button.btn').click(function(e) {  

    e.preventDefault();
    var the_name = $.trim($('#appendedInputButton').val());

    var new_row = $('<tr>\
                         <td>\
                             <a href="#" data-pk="1">'+the_name+'</a>\
                         </td>\
                         <td class="taskOptions">\
                             <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a>\
                         </td>\
                      </tr>');
    new_row.appendTo($('#users'));
});

混乱を避けるために、(クリックして行を追加するときに) ボタンに、より具体的なクラス名を追加する価値があることに注意してください。ID も同様に機能します。

jsFiddle を追加機能で更新しました。ここで見ることができます。

Answer 2

各行の pk データ (data-pk) 属性を取得する方法がわかりません。それはあなた次第です On document.Ready

$('[rel=tooltip]').tooltip();
function bindCloseButtons(){
    $("#users td.taskOptions a").click(function(e){
        $(this).parent().parent().remove();
    });
}

function addTableRow(name , pk){

    // name column
    var row = $("<tr></tr>");
    row.append('<td><a href="#" data-pk="'+pk+'">'+name+'</a></td>');

    // close button
    var btnClose = $('<td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a></td>');

    row.append(btnClose);

    $("#users").append(row);
    bindCloseButtons();
    $('[rel=tooltip]').tooltip();
}

$("#addNew").click(function(e){
    var name = $("#appendedInputButton").val();
    var pk = 1; // TODO: set your pk here 
    addTableRow(name, pk);

});

bindCloseButtons();

ここにフィドルがあります： http://jsfiddle.net/qxdz4/16/

Answer 3

まず、1つのメソッドを作成しますAddmultipleInput()

関数内では、

    .AddMultipleInput = function (btnAddId, btnDelId, inputContainerIdPrefix, inputContainerCss, firstChildInputIdPrefix) {
    if ($('.' + inputContainerCss).length < 2) {
        $('#' + btnDelId).attr('disabled', 'disabled');
    }

    $('#' + btnAddId).click(function () {
        var num = $('.' + inputContainerCss).length; // how many "duplicatable" input fields we currently have
        var newNum = new Number(num + 1);   // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#' + inputContainerIdPrefix + num).clone().attr('id', inputContainerIdPrefix + newNum);
        
        newElem.children().each(function () {
            var idPrefix = $(this).attr('id').substring(0, $(this).attr('id').length - 1);
            var namePrefix = $(this).attr('name').substring(0, $(this).attr('name').length - 1);
            $(this).attr('id', idPrefix + newNum).attr('name', namePrefix + newNum);
        })

        // insert the new element after the last "duplicatable" input field
        $('#' + inputContainerIdPrefix + num).after(newElem);

        // enable the "remove" button
         $('#' + btnDelId).attr('disabled', '');

        // business rule: you can only add 5 names
        if (newNum == 5)
            $('#' + btnAddId).attr('disabled', 'disabled');

});

    $('#' + btnDelId).click(function () {
        var num = $('.' + inputContainerCss).length;

        $('#' + inputContainerIdPrefix + num).remove();
        $('#' + btnAddId).attr('disabled', '');
        if (num == 2)
            $('#' + btnDelId).attr('disabled', 'disabled');
    });

Answer 4

次の jQuery 関数を使用することをお勧めします。

on()、click()、remove()、append()

これについて調査し、適切な行を選択する方法を見つけるために jQuery セレクターも調べてください。

Answer 5

$('.icon-remove').live('click',function(){
    $(this).parent('tr').remove();
});

jQuery 1.7 以降を使用している場合は、.on代わりに.live.

Answer 6

削除リンク (削除行など) にクラスを追加し、次のようなものを使用します。

$(document).on("click",".delete-row",function(ev) {
    ev.preventDefault();
    $(this).tooltip('hide');
    $(this).parents("tr").first().remove();
});

注: 「$(this).tooltip('destroy');」「隠す」よりはましですが、フィドル ブートストラップ バージョンはまだ破棄をサポートしていません。また、必要に応じて、このイベントのハンドラーとして $(document) の代わりに $("#users") を設定できます。ただし、行削除ボタンがハンドラーの子である限り、イベントは適切に委任されます。

行を追加するには、BenM の答えが完璧に機能するはずです。

PS:

.parents(selector) 関数は DOM ツリーを 1 レベル上に移動しますが、.parent() は DOM ツリーを 1 レベル上に移動します。

.parents(selector) 関数は、セレクターに一致するすべての親を選択するため、変更があった場合、テーブル内にテーブルを配置することになります (偶然にも確かです) .first() を使用して、間違った行を削除しないようにしてください。 .

編集：BenMが述べたように、以前のコードは新しい行では機能せず、質問の追加部分を忘れていましたが、新しいコードは機能するはずです。