从表的td获取id

Question

<script type="text/javascript">
function LoadData(){   
    var url = serverURL+"/List.php";
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data){    
            $.each(data.data, function (key, value) {
                var doc_id=value['id'];
                var doc_name=value['name'];
                var doc_speci = value['specialize'];
                $("#myTable").append("<tr><td>"+doc_name+"</td><td>"+doc_speci+"</td><td class='retrieve' data-did="+doc_id+" style='cursor: pointer;'>EDIT</td></tr>");                    
            });
        },
        error: function(data){
            toastr.error("Opps! Something went wrong");
            $(".se-pre-con").fadeOut("slow");
        },
    });
}
</script>

The above appends a tr to my html table below. The HTML TABLE is as follows:

<table id="myTable" class='table table-bordered table-hover table-striped'>
    <tr>
        <th>Name</th>
        <th>Specialization</th>
        <th>Action</th>
    </tr>
</table>

Now i want to retrieve the id from the data attribute from td class retrieve so that i can send the id and redirect it to other page for editing.

Answer 1

First, to add your data attribute you should make sure you add quotes around the value:

data-did='"+doc_id+"'...

So the rendered cell must look something like this:

<td class='retrieve' data-did='n' style='cursor: pointer;'>EDIT</td>

(where n is some value)

Then you can easily retrieve this value with jQuery:

$('specific-td').data('did'); //specific-td referes to a specific cell in a row, you must write that, this is just an example

To get all of the rows:

var ids = [];
$('.retrieve').each(function() {
    ids.push($(this).data('did'));
});

Example: If you have a button for example:

$('#myTable').on('click', '.retrieve input[type="button"]', function() {
    var id = $(this).parent().data('did');
    alert(id);
});

JSFiddle : https://jsfiddle.net/y2an0fu7/1/

Answer 2

// Clicks the edit field
$("td.retrieve").on("click", function(e) {

    var id = $(e.currentTarget).attr("data-did");

    // do with the ID what you want
    alert(id);

});

I'm aware that jQuery has a "data(...)" function but I've run into issues with that sometimes in the past. "attr(...)" will do something similar but relies specifically on the attribute instead of stored objects.