javascript - 数据表中的 fnAddData() 添加到同一行而不是添加到新行

Question

我有一个 xml 字符串，我需要根据该 xml 数据在数据表中显示它..

var xml = "<Users><user><username>user</username><password>password</password></user><user><username>user1</username><password>password1</password></user><user><username>user2</username><password>password2</password></user></users>";  //this is a sample, but in reality I'm getting the xml string from server
xmlDoc = $.parseXML(xml);  //parsing xml to valid xml document
var $events = $(xmlDoc).find("Users");   

var thisTable;
thisTable = $("#user-data").dataTable(      //user-data is the id of my table
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
   }
);

$events.each(function(index, event){
    console.log('test');
    var $event = $(event),
    addData = [];
    addData.push( $event.children("loan").children("user").children("username").text());
    addData.push($event.children("user").children("password").text());
    thisTable.fnAddData(addData);
});

这是基于此处的演示

http://jsfiddle.net/jqbv2/

但是我遇到了一个非常奇怪的问题，在我的控制台中，“test”仅打印一次，因此每个仅迭代一次。同样在我的表中，所有用户名都显示在第一行的用户名字段中，所有密码都显示在第一行的密码字段中。可以说，我在相对时间中使用的数据完全不同，这只是一个例子。这是表格

<table class="table table-striped table-bordered table-hover" id="loan-data">
    <thead>
        <tr>
            <th>Username</th>
            <th>Password</th>
       </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我无法弄清楚为什么所有数据都添加到一行中，这主要是因为无论存在多少数据列表， .each 都只迭代一个。它在 fiddle 示例中完美运行，但是当我尝试进行一些修改时，我遇到了此冲突..

Answer 1

这个更新的each应该可以解决问题:

var eventChildren = $event.children("loan");
eventChildren.each(function(index, event){
    console.log('test');
    var $event = $(event),
    addData = [];
    addData.push( $event.children("user").children("username").text());
    addData.push($event.children("user").children("password").text());
    thisTable.fnAddData(addData);
});

loan 包含 nodeName user 的子级。因此，我们需要迭代 loan 而不是文档根目录。