how to get append table data and getting clicked table row data using jquery

Question

I'm trying to append some table row data using ajax and getting that data via jquery but the thing is both functions are working.

this code function well

function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            alert(data);
            console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr id="'+ value.poid + '">';
                event_data += '<td id="co">' + value.countt + '</td>';
                event_data += '<td id="po">' + value.podetail + '</td>';
                event_data += '<td id="sa">' + value.saless + '</td>';
                event_data += '<td id="pr">' + value.productt + '</td>';
                event_data += '<td id="qt">' + value.qty + '</td>';
                event_data += '<td id="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog()" type="submit" name="insert" id=" '+ value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

in this code also function well but alert shows nothing(empty)

function dog() {

    var $row = $(this).closest("tr");    // Find the row
    var $text = $row.find('#co').text();
    alert($text);

    var podetail = $('#list_table_json').closest("tr").find('td:eq(0)').text();
    var pocode = $(this).closest("tr").find('td:eq(1)').text();
    var saleline = $(this).closest("tr").find('td:eq(2)').text();
    var product = $(this).closest("tr").find('td:eq(3)').text();
    var qty = $(this).closest("tr").find('td:eq(4)').text();
    alert(podetail);}

how do I get the data?

Answer 1

I make this update to my code

    function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            // alert(data);
            // console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr class="' + value.poid + '">';
                event_data += '<td class="co">' + value.countt + '</td>';
                event_data += '<td class="po">' + value.podetail + '</td>';
                event_data += '<td class="sa">' + value.saless + '</td>';
                event_data += '<td class="pr">' + value.productt + '</td>';
                event_data += '<td class="qt">' + value.qty + '</td>';
                event_data += '<td class="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog(' + value.poid + ')" type="submit" name="insert" id=" ' + value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

function dog($dag) {

    var podetail = $('.'+$dag).find('td:eq(0)').text();
    var pocode = $('.'+$dag).find('td:eq(1)').text();
    var saleline = $('.'+$dag).find('td:eq(2)').text();
    var product = $('.'+$dag).find('td:eq(3)').text();
    var qty = $('.'+$dag).find('td:eq(4)').text();
    alert(podetail);}

Answer 2

Your question seems unclear to me but maybe try this :

function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            alert(data);
            console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr class="'+ value.poid + '">';
                event_data += '<td class="co">' + value.countt + '</td>';
                event_data += '<td class="po">' + value.podetail + '</td>';
                event_data += '<td class="sa">' + value.saless + '</td>';
                event_data += '<td class="pr">' + value.productt + '</td>';
                event_data += '<td class="qt">' + value.qty + '</td>';
                event_data += '<td class="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog()" type="submit" name="insert" id=" '+ value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

function dog() {
    var $row = $(this).closest("tr");    // Find the row
    var $text = $row.find('.co').text();
    alert($text);

    var podetail = $(this).closest("tr").find('td:eq(0)').text();;
    var pocode = $(this).closest("tr").find('td:eq(1)').text();
    var saleline = $(this).closest("tr").find('td:eq(2)').text();
    var product = $(this).closest("tr").find('td:eq(3)').text();
    var qty = $(this).closest("tr").find('td:eq(4)').text();
    alert(podetail);
}

I replaced "id" by "class" since there can only one element with a specific id per page. There's a chance that the first element with the "co" id is empty, this is the reason why you only get empty values when searching by id.