Good day. When parsing XML, I can not correctly output the received elements to a table. There is XML:

<group> <title_h-1>Стены</title_h-1> <itog>Итого по стенам и перегородкам</itog> <h-2> <title_h-2>Демонтажные работы</title_h-2> <item> <name>Очистка стен от обоев</name> <measure>кв.м</measure> <volume></volume> <cost placeholder="от 50 руб."></cost> <sum></sum> </item> <item> <name>...</name> <measure>...</measure> <volume>...</volume> <cost placeholder="от 70 руб.">...</cost> <sum>...</sum> </h-2> <h-2> <title_h-2>Отделочные работы</title_h-2> <item> ... </item> </h-2> </group> <group> ... </group>

JavaScript (var $ table == XML):

 var group = 1; var type = 1; var item = 1; var JSection = $($table).find('price'); var $group = JSection.children(); $group.each(function(){ var h_1 = $(this).children('title_h-1').text(); var itog = $(this).children('itog').text(); $('<tbody><tr id="name_'+ group +'"><th colspan="5" class="h-1">'+ h_1 +'</th></tr><tr><th class="add_new">Наименование работ</th><th>Ед.изм</th><th class="qty">Количество</th><th>Цена</th><th class="cost">Стоимость работ</th></tr>').appendTo('#price'); $(this).children('h-2').each(function(){ var h_2 = $(this).children('title_h-2').text(); $('<tr id="type_'+ type +'"><th colspan="5" class="h-2">'+ h_2 +' <i class="icon-plus-sign" title="Добавить новый пункт"></i></th></tr>').appendTo('#price');; $(this).children('item').each(function(){ var name = $(this).children('name').text(); var measure = $(this).children('measure').text(); var volume = $(this).children('volume').text(); var placeholder = $(this).children('cost').attr('placeholder'); var cost = $(this).children('cost').text(); var sum = $(this).children('sum').text(); $('<tr id="item_'+ item +'"><td class="name">'+ name +'</td><td class="measure">'+ measure +'</td><td class="volume"><input type="text" class="amt" value="'+ volume +'" /></td><td class="cost"><input type="text" class="value" placeholder="'+ placeholder +'" value="'+ cost +'" /></td><td class="result">'+ sum +'</td></tr>').appendTo('#price');; group++; type++; item++; }); }); $('<tr id="itog_'+ group +'"><th colspan="4" class="align_r">'+ itog +'</th><th class="itog"></th></tr></tbody>').appendTo('#price');; });

And, actually, HTML:

  <table id="price"></table>

At the output, the first <tbody> contains all the other elements of the <item> containers. I understand that this is due to the use of .append (). And how to do it right, in the morning, I can not understand.

  • Here is a demo for clarity: link . "Transportation and overhead" should contain strings according to the XML structure. Instead, they are simply output at the end. - Realetive__

2 answers 2

The problem is that you attach a non-closed tbody tag. It closes automatically and because of this, the whole layout is floating. And the closing tag that is appendable at the end is simply ignored. Apppend need logically complete, html-valid blocks. In your case, simply add the line to the beginning of the loop

 $('<tbody></tbody>').appendTo('#price');

and remove the tbody opening and closing tags. Here is a little redid your example.

In general, frankly, not the best piece of code. I advise you to work on its optimization.

  • Immensely grateful. I did not know about this feature of "append". - Realetive__

jQuery.parseXML () .

  • one
    No, XML is already cast to string. - Realetive__