JQuery从动态表中获取文本:第n个选择器

时间:2015-09-01 13:32:12

标签: jquery json jquery-selectors

我有一个我无法弄清楚并找到帮助的问题,但不是我需要的帮助。

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

以下是从JSON查询创建动态表的代码:

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

1 个答案:

答案 0 :(得分:2)

点击事件this点击了td,您想要搜索第二个td,您应首先向上移动到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')
})

另外(在一个完全不同的区域),尝试给变量一个范围而不是使用全局变量。这可以为您节省很多麻烦,您只需要在第一次使用之前添加var(如上所述)。