javascript - AddDelete Rows from Table - Stack Overflow

admin管理员组

文章数量:1356855

I have created a table in Twitter Bootstrap here

I want to be able to do 2 things with it

1. Delete rows by pressing delete icon - will delete that row

2. Add a new name by adding text (name) to input field and then pressing "add new row"

DEMO - /

Looking for a way to do this with JavaScript / jQuery

My Code

<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>

Notes

• Clicking the delete button should delete the row
• Typing into the input field and pressing "add new row" button should add a new row to the end of the table with the Name filled in

I have created a table in Twitter Bootstrap here

I want to be able to do 2 things with it

1. Delete rows by pressing delete icon - will delete that row

2. Add a new name by adding text (name) to input field and then pressing "add new row"

DEMO - http://jsfiddle/qxdz4/2/

Looking for a way to do this with JavaScript / jQuery

My Code

<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>

Notes

• Clicking the delete button should delete the row
• Typing into the input field and pressing "add new row" button should add a new row to the end of the table with the Name filled in

• javascript
• jquery
• twitter-bootstrap
• datatables

Share Improve this question Follow edited Oct 31, 2021 at 10:19 Nimantha 6,48466 gold badges3131 silver badges7676 bronze badges asked Feb 21, 2013 at 11:14 RedwallRedwall 1,02055 gold badges3131 silver badges5656 bronze badges 1

• use .remove() and .append() or .after() function for your purpose in jquery – Dineshkani Commented Feb 21, 2013 at 11:19

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

You can easily remove the row by doing this:

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

Similarly, adding a new row can be done as follows:

$('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'));
});

Please note that it might be worth adding a more specific class name to the button (when clicked to add the row) to avoid any confusion. An ID would work just as well.

I've updated your jsFiddle with the additional functionality. You can see here.

I don't know how you obtain each row's pk data (data-pk) attribute. That's up to you 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();

Here's a fiddle: http://jsfiddle/qxdz4/16/

First you create one method AddmultipleInput()

Inside the function,

    .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');
    });

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

If you are using jQuery 1.7 or above, then use .on instead of .live.

Add a class to your delete links (like delete-row) and use something like:

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

Note: "$(this).tooltip('destroy');" would be better than "hide", but your fiddle bootstrap version doesn't support destroy yet. Also, you can set $("#users") instead of $(document) as handler for this event if you want, so long as the delete-row buttons are children of the handler the event gets delegated properly.

To add a line the answer of BenM should work perfect.

PS:

.parents(selector) function travels more than one level up the DOM tree, while .parent() travels a single level up the DOM tree.

.parents(selector) function selects all parents that match the selector, so in case there is a change you end up putting a table inside a table (accidentally im sure) you should use .first(), ensuring you dont remove the wrong row.

Edit: As mentioned by BenM, the previous code would not work with new lines, forgot the add part of the question, the new code should work.

I would suggest you yo use following jQuery functions:

on(), click(), remove(), append()

Please do research on this, also look at the jQuery selectors in order to find how to select proper row.

本文标签： javascriptAddDelete Rows from TableStack Overflow