jQuery：将行数据不一致的 XML 解析为表格答案

【问题标题】：jQuery: parse XML with inconsistent row data into a tablejQuery：将行数据不一致的 XML 解析为表格
【发布时间】：2011-05-01 06:20:13
【问题描述】：

这可能是一个非常菜鸟的问题，但我很难过。

我有以下代码解析 XML 文件并将每个元素放入表中。我的问题是每行中并不总是有九个元素，并且每个元素的名称在 XML 文件之间会发生变化。有没有办法创建一个贯穿每一行的循环（不知道元素名称（col0、col1 等））并将其放入表中？

XML 是这样的：

<row>
    <Col0>titles</Col0>
    <Col1>more titles</Col1>
    <Col2>title</Col2>
    <Col3>name</Col3>
    <Col4>another name</Col4>
    <Col5>different name</Col5>
    <Col6></Col6>
    <Col7></Col7>
    <Col8></Col8>
</row>
<row>
    <Col0>5:58</Col0>
    <Col1>-</Col1>
    <Col2>6:08</Col2>
    <Col3>6:11</Col3>
    <Col4>6:15</Col4>
    <Col5>6:19</Col5>
    <Col6></Col6>
    <Col7></Col7>
    <Col8></Col8>
</row>

等等……

这是我的代码：

<script type="text/javascript">
    $(document).ready(function()
  {
    $.get('newlayout.xml', function(d){
    $('.tabl').append('<table>');

    $(d).find('row').each(function(){

        var $row = $(this);

        var col01 = $row.find('Col0').text();
        var col02 = $row.find('Col1').text();
        var col03 = $row.find('Col2').text();
        var col04 = $row.find('Col3').text();
        var col05 = $row.find('Col4').text();
        var col06 = $row.find('Col5').text();
        var col07 = $row.find('Col6').text();
        var col08 = $row.find('Col7').text();
        var col09 = $row.find('Col8').text();


        html = '<tr>'  
        html += '<td style="width:80px"> ' + col01 + '</td>';
        html += '<td style="width:80px"> ' + col02 + '</td>' ;
        html += '<td style="width:80px"> ' + col03 + '</td>' ;
        html += '<td style="width:80px"> ' + col04 + '</td>' ;
        html += '<td style="width:80px"> ' + col05 + '</td>' ;
        html += '<td style="width:80px"> ' + col06 + '</td>' ;
        html += '<td style="width:80px"> ' + col07 + '</td>' ;
        html += '<td style="width:80px"> ' + col08 + '</td>' ;
        html += '<td style="width:80px"> ' + col09 + '</td>' ;
                    html += '</tr>';

        $('.tabl').append($(html));

    });
});
});

提前致谢，
汤姆

【问题讨论】：

@你可以定义地细化代码，所有这些行都可以细化到 2 或 3 行。

标签： jquery xml parsing loops

【解决方案1】：

尝试以下方法：

$('row').each(function(){
    var $row = $(this);
    $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td')));
})

Working example at jsFiddle.

我认为您可以关注这里发生的事情。如果没有，请走开。这主要是理解不同 jQuery 函数的问题，为此没有什么比 api.jquery.com 更重要的了

编辑： This version 删除了空单元格，只选择那些是某些东西的父单元格（即非空）：

$('row').each(function(){
    var $row = $(this);
    $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td:parent')));
})

【讨论】：

This version 勾勒表格单元格以证明仍在创建空单元格：jsfiddle.net/Eyd67/1
去掉空单元格的版本有一个问题：如果一行中间有一个空单元格，它会破坏列顺序。请参阅：jsfiddle.net/entropo/mJdgq/2 只要标题行格式正确，我的答案中的解决方案就可以避免这种情况。
确实，我注意到了。但这可能是一个“问题”或一个“功能”:) ...毕竟，我们正在为 OP 的数据提供解决方案，而不是我们的数据 ;)

【解决方案2】：

$(d).find('row').each(function() {
    var $row = $(this);
    html = '<tr>';
    var i = 0;

    while (true) {
        if ($.trim((colX = $row.find('Col' + i).text())) !== '') {
            html += '<td style="width:80px"> ' + colX + '</td>';
            i++;
        }
        else {
            break;
        }
    }

    html += '</tr>';
    $('.tabl').append($(html));
});

【讨论】：

【解决方案3】：

如果您只想在第一行有名称的字段的列，那么这对您有用：

http://jsfiddle.net/entropo/ffyDT/

$('row').each(function() {
    var $row = $(this),
        fieldcount = fieldcount || 0,
        afterfirst;
    if (! afterfirst) {
        fieldcount = $row.find(':not(:empty)').length;
        afterfirst = 1;
    }

    $('.tabl').append($('<tr />').append($row.children(':lt('+fieldcount+')')
        .wrapInner('<td />').find('td')));
});

【讨论】：