2015-12-03 74 views
2

我有创建的表,显示添加到数组中的每个项目。每列的最后一行是一个操作字段,可让您编辑或从行中删除。我不知道我应该如何完成这一点。我迄今为止没有正常工作。尝试从多维数组中删除项目(html,javascript)

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

} 

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

回答

0

你如何得到元素并将它们放入参与者列表中? 你有没有参考元素?你可以包括HTML以及所有相关的代码,你想要做什么?

下面是我将如何得到所有的元素,并删除一个。

您可以通过它

这里调用一个.remove()删除元素是我的示例代码:http://jsfiddle.net/gabs00/cxt170re/

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

querySelectorAll创建活动节点列表 我抓住这些元素之一(指数1)并用Element.remove()删除它;

看看小提琴看到它在行动。

0

这里是当前工作的版本:

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/