jquery $ .each没有提供表中的所有信息

时间:2015-07-11 09:15:55

标签: javascript jquery json multidimensional-array

Fiddle

我想将我的数组中所有记录的名称放入一个表中,我的数组没有正确索引,因此我使用$.each而不是迭代使用for loop。我的问题是我只能显示最后一个元素,但如果我试图显示一个值,它正在显示它正确显示的数组。 我在这段代码中缺少什么。 任何想法都表示赞赏

这是我的javascript

for (var i = 0; i < name.length; i++) {
    var names = name[i].Names;
    $.each(names, function (item, names) {
        tr = $('<tr class=""/>');
        //console.log(complainant[obj]);
        //var names = complainant[obj];
        //if(names.hasOwnProperty('fname')){
        console.log(names.suffix);
        var acronymc;
        var upper = names.mname.toUpperCase();
        if (upper) {
            var matches = upper.match(/\b(\w)/g);
            //var matches = upper.replace(/^(\S+)\s+(\S).*/, '$1 $2.');
            //acronym = upper.slice(0,1);
            var acronym1 = matches.join('');
            acronymc = acronym1.slice(-1);
        } else {
            acronymc = '';
        }
        tr.append("<td id=''>" + "<span id='fname'>" + names.fname + "</span>" + " " + "<span id='mname'>" + acronymc + "</span>" + " " + "<span id='lname'>" + names.lname + "</span>" + " " + "<span id='suffix'>" + names.suffix + "</span>" + "</td>");
        tr.append("<td id=''>" + '<span id="street">' + names.street + '</span>' + " " + '<span id="brgy">' + names.brgy + '</span>' + " " + '<span id="town">' + names.town + '</span>' + " " + '<span id="city">' + names.city + '</span>' + "</td>");
        tr.append("<td id=''>" + names.contactnum + "</td>");
        tr.append("<td id=''>" + "<a href='#' class='editcomplainant'>Edit</a>" + "/" + "<a href='#' class='delete'>Delete</a>" + "</td>");

        //}

    });
    $("#nameslist").append(tr);

}

1 个答案:

答案 0 :(得分:1)

$('#nameslist').append(tr);调用放在$.each块内。

这是一种改进tds创建的方法:

var html =
   "<td>" +
     "<span id='fname'/> " +
     "<span id='mname'/> " +
     "<span id='lname'/> " +
     "<span id='suffix'/>" +
   "</td>";

var td = $(html);

td.find('#fname').text(names.fname);
td.find('#mname').text(acronymc);
td.find('#lname').text(names.lname);
td.find('#suffix').text(names.suffix);

tr.apppend(td);

为什么这样更好(imho)?

  • 您不会在变量中包含<>来创建无意的html标记。

  • 将自动生成适当的转义(auml代码)

  • 更容易阅读