Question

我创建了一个基本表单，它输入值并将它们存储在一个数组中;我创建了一个add函数，现在我想创建一个delete函数。

但我不明白：如何从表格中删除所选元素？另外，我想编辑表中的值。如何在表格中更新vales？

<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(){
.....

}

Answer 1

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

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

如果你想删除指定的行，只需给他id，并在上面的函数中替换id为row的表。要更新某个元素而不是.remove（），请使用

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

“你选择的元素”是什么意思？

Answer 2

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;
    });
    });

让我知道！

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

2 个答案: