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

Question

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

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" 只打印了一次，所以 each 只迭代了一次。同样在我的 table 中，所有用户名都显示在第一行的用户名字段中，所有密码都显示在第一行的密码字段中。也就是说，我在 relatime 中使用的数据是完全不同的，这只是一个例子。这是 table

<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 包含 children 和 nodeName user。所以我们需要遍历 loan 而不是文档根目录。

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

fnAddData() in datatable adds to same row instead of adding to new rows

javascript

xml

datatable

jquery