我有一个选择下拉菜单,我可以从脚本中显示/删除条件输出(一个除外)。我遇到的麻烦是删除/删除由$ .each创建的行。我对js还是陌生的,我已经在网上搜索解决方案,但仍然无法正常工作。到目前为止,这是我的代码。
<table id="view_programs" class="table table-striped table-bordered">
<thead>
<tr>
<th>Year</th>
<th width="12%">Action</th>
</tr>
</thead>
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
</table>
脚本
if(selectedValue == '') {
$("#delbutton").hide();
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No program selected.")
).appendTo('#view_programs');
}
else {
$.ajax({
url: '<?php echo site_url("query.php");?>',
type: 'post',
data: {option: selectedValue},
dataType: 'json',
success: function(response) {
$("#delbutton").show().attr("href", "delete/program/"+encodeURIComponent(selectedValue));
if(jQuery.isEmptyObject(response)) {
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No records found.")
).appendTo('#view_programs');
}
else {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += "<tr><td>"+value+"</td><td>"+value+"</td></tr>";
});
$('#view_programs').append(trHTML);
}
console.log(response);
}
});
}
更新:
达到了我想要的目标,这要感谢西蒙先生为我节省了一些时间。我怀疑我的代码会更好,所以我愿意接受任何建议。
改变了这个
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
进入这个
<tbody class="toBeRemoved">
<tr>
<td colspan="2">No program selected.</td>
</tr>
</tbody>
和这个
$('#view_programs').append(trHTML);
进入这个
$('.toBeRemoved').append(trHTML);
并将所有#toBeRemoved更改为.toBeRemoved
最佳答案
您将表行附加到#view_programs
的末尾,这意味着在</tbody>
元素之后...因此,它们没有要删除的#toBeRemoved
id,我想呢?
如果要删除多行,请确保使用类(即.toBeRemoved
)而不是ID。 Ids仅是一个元素的唯一标识符。