在Javascript中以图形方式删除数组

时间:2016-05-26 14:27:16

标签: javascript arrays

我无法弄清楚如何做到这一点,好吧,需要帮助。 我正在尝试将我的信息放入一个将要显示的数组中,并始终能够增长。我需要帮助删除特定条目,通过搜索一个或通过指向鼠标并删除它,

有没有很好的简单方法呢?

<!doctype html>
<html lang="sv">
<body>
<head>
<meta charset="UTF-8">  
</title>
</head>
<body>
    <input type="text" placeholder="Förnamn" id="name" autofocus>
    <input type="date" id="pnummer" autofocus>
    <input type="text" placeholder="Efternamn" id="enamn" autofocus>
    <input type="button" value="mata in" onclick="register()">
    <input type="button" value="visa" onclick="show()">

<script type="text/javascript">
array=[]

function register() 
{ 
 var fnamn = document.getElementById("name").value;
 var enamn = document.getElementById("enamn").value;
 var pnummer = document.getElementById("pnummer").value;
 var p1 = new Person(fnamn,pnummer,enamn);
 array.push(p1);

}
function Person(fnamn, pnummer, enamn)
{
 this.fnamn=fnamn;
 this.pnummer=pnummer;
 this.enamn=enamn;
 this.visa=function()
 {
  var panel ="Förnamn:"+" "+this.fnamn+" "+"Efternamn:"+" "+this.enamn+" "+"Personnummer:"+" "+this.pnummer+"<br>";
  return panel;
 }
}

function show(){
 var showperson=document.getElementById("new");
 showperson.innerHTML=""; 
 var i=0;
 while (array.length>i)
  {
  showperson.innerHTML+=array[i].visa()
  i++;
  }
}
</script>

<p id="new"></p>
<div id="panel"></div> 
</body>
</html>

3 个答案:

答案 0 :(得分:0)

我是一个jQuery选项,您可以找到所点击的require('nameOrPath')的索引,并使用以下函数删除该元素:

<div>

答案 1 :(得分:0)

我不是百分之百确定你要做什么或者其中一些是什么意思,但这是你想要做的事情吗?

var peopleTracker = {};
var peopleCounter = 0;

function addPerson()
{
    // get the values
    var firstName = document.getElementById("firstName").value.trim();
    var lastName = document.getElementById("lastName").value.trim();
    var birthday = document.getElementById("birthday").value.trim();
    
    // make sure none are blank
    if(firstName == "" || lastName == "" || birthday == "") return;
    
    // give each person an ID so we can remove them later
    var personID = ++peopleCounter;
  
    peopleTracker[personID] = {
        "firstName" : firstName,
        "lastName" : lastName,
        "birthday" : birthday
    };
    
    // add the person to the table
    var row = document.getElementById("peopleList").insertRow();
    row.insertCell().innerText = firstName;
    row.insertCell().innerText = lastName;
    row.insertCell().innerText = birthday;
    row.insertCell().innerHTML = '<a href="#" onclick="removePerson(this.parentNode.parentNode, ' + personID + '); return false">remove</a>';
}

// delete a user from the tracker and remove the row
function removePerson(row, personID)
{
    delete peopleTracker[personID];
    row.parentNode.removeChild(row);
}
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8">  
    <title>the dingo ate my baby</title>
  </head>
  <body>
    <input type="text" placeholder="First Name" id="firstName" autofocus>
    <input type="text" placeholder="Sur Name" id="lastName" autofocus>
    <input type="date" id="birthday" autofocus>
    <input type="button" value="Add Person" onclick="addPerson()">
    <br /><br />
    <table border="1">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Sur Name</th>
            <th>Birthday</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody id="peopleList"></tbody>
    </table>
  </body>
</html>

一些想法:

  • 如果您要使用数组删除,那么您将需要使用一些唯一ID才能找到要删除的人。您无法使用数组index,因为当您从阵列中删除人员时,这会发生变化。
  • 通过使用对象存储用户,您可以使用为每个添加的用户更改的唯一ID来删除。

答案 2 :(得分:0)

IMTheNachoMan得到了我正在寻找的答案,谢谢大家:)