Question

我制作了联系人列表应用程序，其中显示了联系方式。默认显示2个联系人详细信息。在index.html中，我创建了两个名为showContacts()和editContact(id)的函数。

我正在动态填充div个标签，即editcontact＆amp; contactlist

中的index.html

当我点击编辑按钮时，它应该显示3个输入元素以从用户获取输入和一个提交按钮我试图实现它（参见下面的代码）但只有搜索栏消失，只显示默认联系人不应显示它应该显示编辑表格。

var array = [];

function Person(fullName, number, group) {
  this.fullName = fullName;
  this.number = number;
  this.group = group;
  array.push(this);
}

Person.prototype.getFullName = function() {
  return this.fullName + ' ' + this.number + ' ' + this.group;
}

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");

console.log(array);

document.getElementById("contactlist").innerHTML = '';

function showContacts() {
  for (var i in array) {
    var id = i;
    contactlist.innerHTML +=
      `
            <ul>
            <div>
            <p>Name: ` + p1.fullName + `</p>
            <p>Number: ` + p1.number + `</p>
            <p>Group: ` + p1.group + `</p>
            <button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
            </div>
            `
  }
}

showContacts();

function editContact(id) {
  document.getElementById("search").style.display = 'none';
  document.getElementById("contactList").style.display = 'none';
  document.getElementById("editcontact").style.display = '';
  document.getElementById("editcontact").innerHTML =
    `<div>
            <input type="text"  placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
            <input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
            <input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
            <button type="button" class="btn btn-success">Submit</button>
            </div>`;
}

<div class="header">

  <div id="dropdown">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
              <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Family</a></li>
      </ul>
    </div>
  </div>

  <div class="title">
    <h2>All Contacts</h2>
  </div>

  <div class="button" id="addButton">
    <p>
      <a href="#">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a>
    </p>
  </div>

</div>

<div id="search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
      </div>
    </div>
  </form>
</div>

<div id="contactlist">

</div>

<div id="editcontact">

</div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">

截图：

1）点击之前点击editContact：

shift

2）onclick editContact：

现场演示可以在这里看到：

Answer 1

有几件事。你在你的HTML中用你的联系人列表输入了一个拼写错误（应该是contactList）。在showContacts的循环中，您将id设置为索引，应该像

function editContact(id) {
    var obj = array.filter(function (ele) {
        console.dir(ele);
        if (ele.number === id) return ele;

    });
    console.dir(obj);
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactList").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML =
        '<div>'+
        '<input type="text"  placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
        '<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
        '<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
        '<button type="button" class="btn btn-success">Submit</button>'+
       '</div>';
}

您的editContact方法使用id作为索引（如前所述），这是错误的。你可以这样做（见下面的代码）。当您单击编辑时，我会根据链接提供的唯一ID过滤数组。

{{1}}

我根据你自己做了一个更新的小提琴 https://jsfiddle.net/w2hoqmts/3/

Answer 2

应在editContact()和showContacts()函数中进行以下更改。

function showContacts(){
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ p1.fullName +`</p>
        <p>Number: `+ p1.number +`</p>
        <p>Group: `+ p1.group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();


function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `<div>
        <input type="text"  placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
        <input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
        <input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
        <button type="button" class="btn btn-success">Submit</button>
        </div>`;
}

单击编辑按钮时无法显示编辑表单？

2 个答案: