我在div
页面中制作了3个index.html
代码:
1)带有id="contactlist"
的div填充所有联系人列表
2)带id="addnewcontact"
的div显示子格式
3)带id="editcontact"
的div显示表单以编辑详细信息
每当我点击edit
按钮时,它会显示用于编辑详细信息的表单,但如果我点击右上角的添加按钮(参见屏幕截图),则页面会显示2个表单编辑表单并添加新表单
当我点击编辑按钮时,它应该只显示编辑表格,当我点击右上角的添加按钮时,它应该只显示添加新的联系表格。
要产生上述错误,请先点击编辑按钮,然后点击右上角的添加按钮。
index.html:
<div id="contactlist" >
</div>
<div id="addnewcontact">
</div>
<div id="editcontact">
</div>
在app.js中:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
</div>
<button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
</form>
`;
}
function addNew() {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("addnewcontact").style.display = '';
document.getElementById("addnewcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number</label>
<input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Group</label>
<input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
</form>
`;
}
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();
Js fiddle live demo:https://jsfiddle.net/nca8xx6c/
答案 0 :(得分:2)
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("addnewcontact").style.display = 'none';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
</div>
<button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
</form>
`;
}
function addNew() {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("addnewcontact").style.display = '';
document.getElementById("editcontact").style.display = 'none';
document.getElementById("addnewcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number</label>
<input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Group</label>
<input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
</form>
`;
}
试试这段代码片段。