Question

我有一个从数据库解析的JSON数组。

$.getJSON(… ,

使用$.each迭代数据，然后按名称放入table1。

function(geojson) {
    $.each(geojson.features, function(i, feature) {
        var id = feature.properties.id;
        var name = feature.properties.name;
        var otherDetails = feature.properties.otherDetails;

        // Populate table1 with clickable links
        $("#table1 table").append('<tr><td><a href="#" onclick="['+id+']; return false;">'+name+'</a></td></tr>')
            //populate table2 with name
            .click(function(){
                $("#table2 table").append('<tr><td><a">'+name+' '+otherDetails+'</a></td></tr>')
        })
    });
});

这一切都很棒，正是我想要的。表中的每个功能“名称”都是可点击的，我希望在单击时，另一个表（table2）仅使用'name'和'otherDetails'填充一条记录。上面的代码几乎让我在那里，但打算用单击的功能名称填充table2，它填充table2与完整的几个功能几乎一个table1的副本，我想因为它仍然在$.each内。如何在嵌套追加中停止.each迭代？提前致谢。

Answer 1

click事件处理程序已在table级别应用，因此反复执行。尝试将其应用于行，如下所示：

 // Populate table1 with clickable links
 var newRow = $('<tr><td><a href="#" onclick="['+id+']; return false;">'+name+'</a></td></tr>');
 $("#table1 table").append(newRow);
 $(newRow).click(function(){
     $("#table2 table").append('<tr><td><a">'+name+' '+otherDetails+'</a></td></tr>')
 });

Answer 2

向table1的行添加单击处理程序。单击时，拉出名称以放入table2的新行。

$('#table1 table').on('click', 'tr', function()
{
    var name = $(this).find('a').text();
    $('#table2 table').append('<tr><td><a">' + name + '</a></td></tr>');
});

维护数据的另一种方法是使用data attributes。这样你就可以使用otherinfo数据了。

添加onclick到json生成的表

2 个答案: