How to get the data from dynamically table

Question

I have a dynamically table I need to get the date from it any place in the script.....

the table

$('#update_panel').html('Loading Date....');

$.ajax({
    url: '/Home/GetCountries',
    type: 'GET',
    datatype: 'Json',
    success: function (data) {
        if (data.length > 0) {
            var $data = $('<table></table>').addClass('table table-responsive table-striped');
            var header = "<thead><tr><th>Country ID</th><th>Country</th></tr></thead>";
            $data.append(header);

            $.each(data, function (i, row) {
                var $row = $('<tr/>');
                $row.append($('<td/>').html(row.CountryId));
                $row.append($('<td/>').html(row.CountryName));
                $row.append($('<td/>').html("<a href='/home/Save/" + row.CountryId + "' class='popup'>Edit</a>&nbsp;|&nbsp;<a href='/home/Delete/" + row.CountryId + "' class='popup'>Delete</a>"));
                $data.append($row);
            });

            $('#update_panel').html($data);
        }

I tried it but it didn't work

    $("#mytable tr").click(function () {

        var countryId = $(this).find('td').eq(1).text().trim();
        alert(countryId);
    });

How to reach the table in the Dom?

Thanks in Advance

Answer 1

   $.ajax({
                url: '/Home/GetCountries',
                type: 'GET',
                datatype: 'Json',
                success: function (data)
                {
                    if (data.length > 0)
                    {
                        // HERE I HAVE APPLIED 'id' ATTRIBUTE TO TABLE
                        var $data = $('<table id="mytable"></table>').addClass('table table-responsive table-striped');
                        var header = "<thead><tr><th>Country ID</th><th>Country</th></tr></thead>";
                        $data.append(header);
                        $.each(data, function (i, row)
                        {
                            var $row = $('<tr/>');
                            $row.append($('<td/>').html(row.CountryId));
                            $row.append($('<td/>').html(row.CountryName));
                            $row.append($('<td/>').html("<a href='/home/Save/" + row.CountryId + "' class='popup'>Edit</a>&nbsp;|&nbsp;<a href='/home/Delete/" + row.CountryId + "' class='popup'>Delete</a>"));
                            $data.append($row);
                        });
                        $('#update_panel').html($data);
                    }
                }
            });
            //USE 'on' EVENT WHEN YOU WANT TO TRIGGER EVENT ON DYNAMIC DOM
            $("#update_panel").on("click", "#mytable tr", function ()
            {
                // IT WILL SELECT ALL 'td' CHILDREN OF CLICKED 'tr' ELEMENT.
                // THEN WE USED .first() SO IT WILL SELECT ONLY FIRST 'td' ELEMENT
                var countryId = $.trim($(this).children("td").first().text());
                alert(countryId);
            });