2015-12-03 104 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/