2

I have a html code and I want when I click delete to delete current row, then show the confirm " You want to delete [Name]?" So, how can I get name value to confirm when I click delete using Jquery?

<table id="tblInfo">

    <thead>
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Birthday</th>
        <th></th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>Name1</td>
        <td>01/01/1990</td>
        <td>
            <a href="#" class="btnView" >View</a>
            <a href="#" class="btnDelete">Delete</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Name2</td>
        <td>01/01/1990</td>
        <td>
            <a href="#" class="btnView">View</a>
            <a href="#" class="btnDelete">Delete</a>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td></td>
        <td><input type="text" name="" value="" size="25" /></td>
        <td><input type="text" name="" value="" size="25" /></td>
        <td>
            <a href="#" class="btnAdd">Add</a>
        </td>
    </tr>
    </tfoot>
</table>
DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
Hữu Lộc Phan
  • 25
  • 2
  • The docs: https://api.jqueryui.com/dialog/ An example: http://jsfiddle.net/vandalo/nvZc4/ Similar questions have been answered before on SO: http://stackoverflow.com/questions/10867077/jquery-dialog-popup http://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog Search for similar questions and try to do a bit of research before posting a question here, so you can show us where exactly you get stuck! Check out http://stackoverflow.com/help/on-topic to get an idea of what kinds of questions we like to see. – Hypaethral Oct 27 '15 at 17:30

2 Answers2

0

You need to find the the closest tr element and then get the text from the 2nd td element.

here is the working jsfiddle for this problem.

$(document).ready(function(){
    $('.btnDelete').click(function(){
        var selectedName = $($(this).closest("tr").children()[1]).text(); 
        console.log("Selected name is "+ selectedName);
    });
});

https://jsfiddle.net/rbdharnia/03gbLhu4/1/

rbdharnia
  • 1
  • 1
  • 6
0

demo: http://jsfiddle.net/1qda1jpx/1/

$(document).ready(function() {
    $("#tblInfo").on("click", ".btnDelete", function() {
        var $this = $(this);
        var name = $this.closest("tr").find("td:nth-child(2)").text(); // gets the name of the row
        if (confirm("Do you want to delete" + name + "?"))
        { $this.closest('tr').remove(); } // upon confirmation, remove the row
    });
});
indubitablee
  • 8,136
  • 2
  • 25
  • 49