У меня есть раскрывающийся список, из которого пользователь может выбрать опцию "старый", "новый". В соответствии с выбранной опцией я запрашиваю данные из xml и отображаю их в таблице.
Html
<body>
<table id="NovelList" class="NovelList" border="1">
<tr>
<th>Novel Title</th>
<th>Author</th>
<th>Publishing Year</th>
<th>Price</th>
<th>Purchase</th>
</tr>
</table>
</body>
и для добавления данных в таблицу по выбору выберите, я делаю это: -
var nodes = xmlDoc.evaluate(pathExpr, xmlDoc, nsResolver, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
var b= [];
var d=result.childNodes;
for(var i=0;i<d.length;i++){
if(d[i].nodeType == 1){
b.push(d[i]);
}
}
for(var p=0;p<b.length;p++){
var n = b[p];
if (n.localName== "title"){var t = n.childNodes[0].nodeValue;}
if (n.localName== "author"){var a = n.childNodes[0].nodeValue;}
if (n.localName== "year"){var y = n.childNodes[0].nodeValue;}
if (n.localName== "price"){var pr = n.childNodes[0].nodeValue;}
if (n.localName== "code"){var c = n.childNodes[0].nodeValue;}
}
$('.NovelList tr:last').after(
'<tr><td class="value">'+ t
+ '</td><td class="value">'+ a
+ '</td><td class="value">' + y
+ '</td><td class="value">' + pr
+ '</td><td class="chk"><input type="checkbox" name="chkbox" value='+'"'+c+'"'+'></td></tr>');
result = nodes.iterateNext();
}
}
но поскольку я использую ".after", каждый раз, когда я выбираю параметр, он добавляется к уже отображенной таблице.
Я хочу заменить строки таблицы всякий раз, когда выбран параметр.
спасибо за помощь Fenixp. Я добавил тег заголовка и тела в таблицу, но затем также empty() не работал, поэтому я в конечном итоге использовал remove().
HTML файл после редактирования
<table id="NovelList" class="NovelList" border="1">
<thead>
<tr>
<th>Novel Title</th>
<th>Author</th>
<th>Publishing Year</th>
<th>Price</th>
<th>Purchase</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
Вызов этого перед добавлением row-
$('#NovelList tbody >tr.dtr').remove();
и добавление строки с использованием
$('.NovelList tbody tr:last').after(
'<tr class="dtr"><td class="value">'+ t[0].firstChild.nodeValue
+ '</td><td class="value">'+ a[0].firstChild.nodeValue
+ '</td><td class="value">' + y[0].firstChild.nodeValue
+ '</td><td class="value">' + p[0].firstChild.nodeValue
+ '</td><td class="chk"><input type="checkbox" name="chkbox" value='+'"'+code+'"'+'></td></tr>');
Сначала отделите голову и тело так:
<table>
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
</tbody>
</table>
а затем позвоните
$('tbody').empty();
Это должно делать свое дело. В принципе, сначала нужно удалить DOM.