这可能是一个非常新秀的问题,但我很难过。
我有以下代码,它解析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));
});
});
});
提前致谢,
汤姆
答案 0 :(得分:7)
尝试以下方法:
$('row').each(function(){
var $row = $(this);
$('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td')));
})
我认为你可以关注这里发生的事情。如果没有,请求离开。这主要是理解不同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')));
})
答案 1 :(得分:0)
$(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));
});
答案 2 :(得分:0)
如果您想只为第一行中带有名称的字段添加列,那么这将适合您:
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')));
});