时间戳

首页 > 解决方案 > 如何通过 JavaScript 删除表中的数据

javascript - 如何通过 JavaScript 删除表中的数据

问题描述

我创建了一个输入值并将它们存储在数组中的基本表单；我创建了一个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">&nbsp;</td>

    <td id="uage">&nbsp;</td>

    <td id="uemail">&nbsp;</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(){
.....

}

标签： javascript

解决方案

如果要删除整个表，请执行以下操作：

document.getElementById("table").remove();

如果你想删除指定的行，只需给他 id 并用上面函数中的行 id 替换 table。要更新某些元素而不是 .remove() 使用

document.getElementById("ROW_ID").innerHTML="something";

“选定元素”是什么意思？

推荐阅读