JQuery 从动态 table 的 :nth 选择器中获取文本

Question

我遇到了一个我无法解决的问题并找到了一些帮助，但不是我需要的帮助。

我需要从单击的行访问 data[i].no 变量。我只是无法在底部获取我的代码来显示它。

这是从 JSON 查询创建动态 table 的代码：

html = '<table class="tbl small">'
$time = 0
for (var i = 0; i< len; i++) {          
    $time = (parseInt($time)+parseInt(data[i].time));
    if (data[i].status == "MISSING") {
    $('#tottime').html('');
    } else {
        $('#tottime').html('Total time outstanding for ' + monthNames[d.getMonth()] + ' : ' + $time);
    }
    if (data[i].overdue == "Yes") {
        html = html + '<tr style="background: #FF0000">'
    } else if (data[i].status == "RE ASSES") {
        html = html + '<tr style="background: #D0C0C0">'
    } else if (data[i].status == "REPAIR") {
        html = html + '<tr style="font-style: italic">'
    } else{
        html = html + '<tr>'
    }
    html = html + '<td class="border col1">'+data[i].line+'</td>'
    html = html + '<td class="border col2">'+data[i].no+'</td>'
    html = html + '<td class="border col3">'+data[i].desc+'</td>'           
    html = html + '<td class="border col4">'+data[i].loc+'</td>'            
    html = html + '<td class="border col5">'+data[i].time+'</td>'           
    html = html + '<td class="border col6">'+data[i].lastcal+'</td>'            
    html = html + '<td class="border col7">'+data[i].frequency+'</td>'          
    html = html + '<td class="border col8">'+data[i].status+'</td>' 
    if (data[i].external == "E" ) {
        html = html + '<td class="border col9">&#10004;</td>'   
    } else {
        html = html + '<td class="border col9"></td>'
    }
    html = html + '</tr>'           
    }
html = html + '</table>'
$('#output').html(html);

下面是创建对话框以显示确认页面的代码：

$('#output').on('click','td',function() {
    html = $(':nth-child(2)',this).text()
    $('#msgBox').html(html);
    $('#msgBox').dialog('option','title','Calibration Complete')
    $('#msgBox').dialog('open')
})

Answer 1

在点击事件中this是被点击的td而你想搜索第二个td，你应该将"up"移动到tr第一.

$('#output').on('click','td',function() {

    // $(this) is the clicked td
    // .closest("tr") returns the first tr parent ( in this case the same as .parent() )
    // .find(':nth-child(2)') gives you the second child of the tr
    var html = $(this).closest('tr').find(':nth-child(2)').text()

    $('#msgBox').html(html);
    $('#msgBox').dialog('option','title','Calibration Complete')
    $('#msgBox').dialog('open')
})

另外（在一个完全不同的领域），尝试给你的 a 变量一个范围而不是使用全局变量。这可以为您省去很多麻烦，您只需在第一次使用前添加 var（如上）。

JQuery 从动态 table 的 :nth 选择器中获取文本

JQuery get text from :nth selector from dynamic table

jquery

json

jquery-selectors