无法从HTML获取表值

I want to get this information here:

我想在这里获得这些信息:

Because I need it to fetch data from a database (primary key). But getting this value is tricky. When the document is ready, I run the following JavaScript to create the table:

因为我需要它来从数据库(主键)获取数据。但是获得这个价值很棘手。文档准备好后,我运行以下JavaScript来创建表:

function GetActivityAbstracts() {
    $.getJSON("http://localhost:52535/ExampleService.svc/GetTestTableData", function (testData) {
        var object = $.parseJSON(testData);
        var activityTable = $('#activityTable');

        // create HTML only by using $.map, it's better for perfs to generate all HTML before adding it into the dom
        var html = $.map(object, function (item, index) {
            //index here is used to generate unique ids
            var activityId = item['ActivityId'];
            var activityName = item['ActivityName'];
            var activityResponsible = item['Responsible'];
            var activityEstimatedSavings = parseFloat(item['EstimatedSavings']).toFixed(2);
            var activityEstimatedStart = item['EstimatedStart'];
            var activityEstimatedEnd = item['EstimatedEnd'];
            var activityStatus = item['Status'];
            // TODO: Make more user-friendly Status Descriptions instead of C# enum values.
            // move id  attr on on <tr> 
            return '<tr id="activityId_' + index + '">' +
                    '<td data-id="' + activityId + 
                    '" style = "vertical-align: middle; align: center;">'
                    + activityId + '</td>' +
                    '<td style = "vertical-align: middle;">' +
                    '<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
                    'title=" ' + activityStatus + '" style="background-color:' +
                    GetColumnColor(activityStatus) + ';"></div></td>' +
                    '<td id = "activityName_' + index + '" style = "vertical-align: middle;">'
                    + activityName + '</td>' +
                    //Add index for ids here
                    '<td style = "vertical-align: middle;">'
                    + activityResponsible + '</td>' +
                    '<td style = "vertical-align: middle;">'
                    + activityEstimatedSavings + '</td>' +
                    '<td style = "vertical-align: middle;">'
                    + activityEstimatedStart + '</td>' +
                    '<td style = "vertical-align: middle;">'
                    + activityEstimatedEnd + '</td>' +
                    '</tr>';

        });
        // Add HTML into activityTable
        activityTable.html(html);
        // Add event by using delegate event.
        debugger
        AddActivityAbstractOnClickEvent();
        $('#current-data-table').append(activityTable);

        /* This call is necessary because the table is added dynamically */
        $('[data-toggle="tooltip"]').tooltip();
    });
}

Then I run this:

然后我运行这个:

function AddActivityAbstractOnClickEvent() {
    $('#activityTable').on('click', 'tr', function () {
        var id = $(this).find('td').find('data-id').children();
        GetActivityFullDescription(id);
    });
}

function GetActivityFullDescription(id) {
    alert(id);
}

As a simple test to make sure I got the right ID. But doing so doesn't get me the ID and I also feel I'm doing it overly complicated ._.

作为一个简单的测试,以确保我得到正确的ID。但这样做并没有让我获得身份证,而且我也觉得我这样做过于复杂。

Running the code above I see this value below in the debugger. But I can't access it and that's probably because I am doing it wrong to begin with.

运行上面的代码我在调试器中看到下面的这个值。但我无法访问它,这可能是因为我开始做错了。

What I tried to get around this selection method I used, was to add "data-id" to the <td> element and then access it, but that didn't really work out...any ideas?

我试图解决我使用的这种选择方法,是将“data-id”添加到元素然后访问它,但这并没有真正解决...任何想法?

2 个解决方案

#1

If you need to get the first td, you can use

如果你需要获得第一个td,你可以使用

 $('#activityTable').on('click', 'tr', function () {
        var id = $(this).find('td:first').data('id');
        GetActivityFullDescription(id);
    });

#2

data-id is not an element its an attribute thus Attribute Value selector needs to be used and use .data() to fetch underlying attribute value not its children.

data-id不是其属性的元素,因此需要使用属性值选择器并使用.data()来获取基础属性值而不是其子元素。

var id = $(this).find('td[data-id]').data('id');
//Alternatively :first selector can be used
//var id = $(this).find('td:first').data('id');

instead of

var id = $(this).find('td').find('data-id').children();

#1