Блог

Вероятно, это вопрос для новичков, но я в тупике.

У меня есть следующий код, который анализирует 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));

    });
});
});
  

Заранее спасибо,

Том

попробуйте следующее:

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

Рабочий пример в jsFiddle.

Я думаю, вы можете следить за тем, что здесь происходит. Если нет, не спрашивайте. В основном это проблема понимания различных функций jQuery, и для этого нет ничего лучшеapi.jquery.com

редактировать: Эта версия избавляется от пустых ячеек, выбирая только те ячейки, которые являются родительскими для чего-либо (т. Е. не пустые):

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

 $(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));
});
  

Если вы хотите иметь столбцы только для полей с именем в первой строке, то это подойдет для вас:

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')));
});