Question

我有一个动态表我需要从脚本中的任何地方获取日期.....

表

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

我尝试了但它没有工作

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

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

如何到达Dom的桌子？

先谢谢

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

Answer 2

好像你的桌子没有ID #mytable。将$("#mytable tr").click(function () {更改为：

$('#update_panel').on('click','.table tr',function () {...});

或者只是将id #mytable添加到表

中

 $('<table id="myTable"></table>')

使用.on注册处理程序，如下所示：

$('#update_panel').on('click','#mytable tr',function () {...});

Answer 3

以下是一些观察和可能的解决方案：

您的动态表格缺少ID（mytable）
添加后，您的代码应该可以正常工作。请参阅以下代码，

＆＃13;

var data = [];
var row1 = {};
row1.CountryId = "100";
row1.CountryName = "USA";
data.push(row1);

var row2 = {};
row2.CountryId = "101";
row2.CountryName = "Germany";
data.push(row2);


if (data.length > 0) {
            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);
  }

$("#mytable tr").click(function () {

        var countryId = $(this).find('td').eq(0).text().trim();
        alert(countryId);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="update_panel"></div>

＆＃13;

如何从动态表中获取数据

3 个答案: