如何通过JavaScript删除表格中的数据
如何通过JavaScript删除表格中的数据
提问于 2018-06-02 00:38:32
我已经创建了一个输入值并将其存储在数组中的基本表单；我创建了一个add函数，现在我想创建一个delete函数。
但是我不明白:我如何从我的表中删除一个选中的元素？此外，我还想编辑表中的值。如何更新表中的值？
<div align="center">
<h1>User Form</h1>
<hr>
<label>User Name:</label>
<input type="text" id="sname" /><br><br>
<label>User Age:</label>
<input type="text" id="sage" /><br><br>
<label>User Email:</label>
<input type="text" id="semail" /><br><br>
<button onclick="add()">Add</button>
</div>
<br><br>
<table align="center" width="1000px" border="2px" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Delete</th>
<th>Update</th>
</tr>
<tr id="myRow1">
<td id="uname"> </td>
<td id="uage"> </td>
<td id="uemail"> </td>
</tr>
</table>
<script type="text/javascript">
var cityArray = [];
//add function
function add() {
var inputName = document.getElementById("sname");
var inputAge = document.getElementById("sage");
var inputEmail = document.getElementById("semail");
var user={
Name:inputName.value,
Email:inputEmail.value,
Age:inputAge.value
}
console.log(inputName);
for(var key in user)
{
cityArray.push(user[key]);
}
console.log(cityArray);
var table=document.getElementById('table');
var row=table.insertRow();
var cell0=row.insertCell(0);
var cell1=row.insertCell(1);
var cell2=row.insertCell(2);
var cell3=row.insertCell(3);
var cell4=row.insertCell(4);
cell0.innerHTML=user.Name;
cell1.innerHTML=user.Age;
cell2.innerHTML=user.Email;
cell3.innerHTML="<input type='submit' value='Delete' onclick='deleteRow()'>";
cell4.innerHTML="<input type='submit' value='Update' onclick='edit()'>";
}
function del(){
.....
}回答 2
Stack Overflow用户
发布于 2018-06-02 00:48:03
如果你想删除整个表，可以这样做：
document.getElementById("table").remove();如果你想删除指定的行，只需给他一个id，并用上述函数中行的id替换table。要更新某些元素而不是.remove()，请使用
document.getElementById("ROW_ID").innerHTML="something";你所说的“选定元素”是什么意思？
Stack Overflow用户
发布于 2018-06-02 02:41:33
Ciao Fahad，我认为更快的解决方案是使用一点JQuery。首先，您需要在添加单元格属性时分配一个id：
cell4.innerHTML="<input id="test" type='submit' value='Update'
onclick='edit()'>";我把"test“作为id，但是你可以使用任何你想要的东西。然后输入JQuery
$(document).ready(function() {
$("#test").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400, function(){
tr.remove();
});
return false;
});
});让我知道！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50647760
复制相关文章
相似问题