Question

我创建的表格显示了添加到数组中的每个项目。在每列的最后一行是一个操作字段，允许您编辑或删除该行。我不确定我应该怎么做到这一点。到目前为止，我没有正常工作。

function del(item) {

    participantList.splice(item,1);
    displayLIst();
}

function addInfo() { 
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var email = document.getElementById("email").value;
    if(fname !='' && lname !="" && email !='') {
        participantList[count] = new Object();
        participantList[count].Fname = fname;
        participantList[count].Lname = lname;
        participantList[count].Email = email;
        participantList[count].Action = "<button onclick='del("+count+")'>Delete</button>" + "<button onclick='edit("+count+")'>Edit</button>";
        count++;

        document.getElementById("fname").value ="";
        document.getElementById("lname").value = "";
        document.getElementById("email").value = "";
        }
        displayList();

}

我想删除数组中指定行的每个对象。

Answer 1

您如何获取元素并将它们放入参与者列表中？你有这些元素的参考吗？您是否可以将HTML以及所有相关代码包含在您想要的内容中？

下面是我如何获取所有元素，并删除一个元素。

您可以通过调用.remove（）来删除元素

以下是我的示例代码：http://jsfiddle.net/gabs00/cxt170re/

var listItems = document.querySelectorAll('li');
var item = listItems[1];
item.remove();

querySelectorAll创建一个实时节点列表我抓住其中一个元素（索引1）并使用Element.remove（）;

删除它

查看小提琴，了解它的实际效果。

Answer 2

这是当前的工作版本：

var participantList = [];
var edit = function(item) {};
var del =  function(item) {

    participantList.splice(item,1);
    displayList();
};

function addInfo() { 
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var count = participantList.length;
if(fname !='' && lname !="" && email !='') {
  var item = {};
  item.Fname = fname;
  item.Lname = lname;
  item.Email = email;
  item.Action = "<button onclick='del("+count+")'>Delete</button><button onclick='edit("+count+")' disabled>Edit</button>";

  participantList.push(item);

    document.getElementById("fname").value ="";
    document.getElementById("lname").value = "";
    document.getElementById("email").value = "";
    }
    displayList();

};

var displayList = function () {
  // clean previous data
  console.log(participantList);
  document.getElementById("results").innerHTML = "";
  var content = "";
  for(var i = 0; i<participantList.length; i++) {
    content += "<tr>";
    content += "<td>" + participantList[i].Fname + "</td>";
    content += "<td>" + participantList[i].Lname + "</td>";
    content += "<td>" + participantList[i].Email + "</td>";
    content += "<td>" + participantList[i].Action + "</td>";
    content += "</tr>"
  }
  document.getElementById("results").innerHTML = "<table>" + content + "    </table>";
};

使用以下HTML代码：

<input type="text" id="fname" />
<input type="text" id="lname" />
<input type="text" id="email" />

<button onclick="addInfo()">
  Add
</button>

<div id="results">

编辑：缺少JSFiddle链接：https://jsfiddle.net/d64314uk/

试图从多维数组中删除项目（html，javascript）

2 个答案: