[英]jQuery manipulating table rows from ajax response
I have a select dropdown and I can display/remove the condition outputs from my script except for one. 我有一个选择下拉菜单,我可以从脚本中显示/删除条件输出(一个除外)。 What I'm having trouble is removing/deleting the rows created by the $.each. 我遇到的麻烦是删除/删除由$ .each创建的行。 I'm still new with js and I've searched for solutions online but I still couldn't get it to work. 我对js还是陌生的,我已经在网上搜索解决方案,但仍然无法正常工作。 Here's my code so far. 到目前为止,这是我的代码。
<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>
script 脚本
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);
}
});
}
Update: Achieved what I wanted thanks to Mr. Simon for shedding me some light. 更新:实现了我想要的东西,这要感谢西蒙先生为我提供了一些帮助。 I doubt that my code could be better so I'm open to any suggestions. 我怀疑我的代码会更好,所以我愿意接受任何建议。
changed this 改变了这个
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
into this 进入这个
<tbody class="toBeRemoved">
<tr>
<td colspan="2">No program selected.</td>
</tr>
</tbody>
and this 和这个
$('#view_programs').append(trHTML);
into this 进入这个
$('.toBeRemoved').append(trHTML);
and turned all the #toBeRemoved into .toBeRemoved 并将所有#toBeRemoved更改为.toBeRemoved
you append your table rows to the end of #view_programs
, which means after the </tbody>
element... so they don't have a #toBeRemoved
id which you want to remove i guess? 您将表格行追加到#view_programs
的末尾,这意味着在</tbody>
元素之后...因此,它们没有您想删除的#toBeRemoved
id呢?
If you want to remove multiple rows, make sure to use a class (ie .toBeRemoved
) instead of an id. 如果要删除多行,请确保使用类(即.toBeRemoved
)而不是ID。 Ids are unique identifiers for one element only. Ids仅是一个元素的唯一标识符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.