Я попытался создать адресную книгу JavaScript и хотел показать ее в html-таблице, но она не работает. Смысл: если я нажму кнопку добавления контакта, я смогу заполнить данные в окне подсказки. после этого я вижу результат в таблице, но вместо этого... нет таблицы! и я не могу добавить новый контакт. Как я могу решить эту проблему?
Код JavaScript:
function addcontact(){
contactName = {
firstName: prompt("firstname",''),
lastName: prompt("lastname",''),
address: prompt("address",''),
phoneNumber: prompt("phonenumber",'')
};
var contact = [contactName];
function printPerson(person){
document.write(person.firstName+"<br />"+person.lastName+"<br />"+person.address+"<br />"+person.phoneNumber+"<br />");
}
function list(){
var contactLength = contact.length;
for(i=0; i < contactLength; i++){
printPerson(contact[i])
}
}
list();
};
и вот мой html:
<!DOCTYPE html>
<html>
<head>
<title>div insteller</title>
<meta charset="utf-8">
<style type="text/css">
#adsressbook{width:300px;}
#adsressbook td, th{ border:1px solid #000; padding:5px 10px;}
</style>
</head>
<body>
<form action='' method=''>
<table id="adsressbook">
<tr>
<th>Contacten</th>
</tr>
<tr>
<td><script type="text/javascript" src="adress/adres.js"></script></td>
</tr>
<tr>
<td><input type="submit" value="add contact" onclick="addcontact()"></td>
</tr>
</table>
</form>
</body>
</html>
Попробуйте что-нибудь в следующих строках:
var contacts = [];
function addcontact() {
var person = {
firstName: prompt("firstname", ""),
lastName: prompt("lastname", ""),
address: prompt("address", ""),
phoneNumber: prompt("phonenumber", "")
};
contacts.push( person );
}
function resetView() {
document.getElementById("output").innerHTML = "";
}
function printPerson( person ) {
document.getElementById("output").innerHTML +=
person.firstName + " - " +
person.lastName + " - " +
person.address + " - " +
person.phoneNumber + "<br />";
}
function listContacts() {
resetView();
var len = contacts.length;
for (x = 0; x < len; x++) {
printPerson( contacts[x] );
}
}
Здесь работает JSFiddle: http://jsfiddle.net/nttk6/42/
Вероятно, лучше было бы изменить printPerson()
и resetView()
чтобы использовать DOM, а не .innerHTML
. Вы также можете повторно объединить функции в 1 функцию, если хотите.
Главное - переместить contact
или в моем примере переменную contacts
из функции addContact
иначе она будет сброшена каждый раз, когда вызывается функция. Также вы не хотите использовать Document.Write()
.
И вот еще один пример этого реализован как класс:
var ContactManager = {
contacts: [],
resetView: null,
appendView: null,
addContact: function(){
var person = {
firstName: prompt("firstname", ""),
lastName: prompt("lastname", ""),
address: prompt("address", ""),
phoneNumber: prompt("phonenumber", "")
};
this.contacts.push( person );
this.listContacts();
},
listContacts: function(){
var len = this.contacts.length;
this.resetView();
for( x = 0; x < len; x++ ) {
this.appendView( this.contacts[x] );
}
}
};
ContactManager.resetView = function(){
document.getElementById("output").innerHTML = "";
};
ContactManager.appendView = function( person ){
document.getElementById("output").innerHTML +=
person.firstName + " - " +
person.lastName + " - " +
person.address + " - " +
person.phoneNumber + "<br />";
};
И JSFiddle для версии класса: http://jsfiddle.net/TPxRa/6/
Это потому, что вы используете document.write()
. Эта функция перезаписывает содержимое вашего документа и вставляет указанный вами текст. Что вы хотите сделать, это добавить строку в таблицу.
Вы можете проверить этот пример (который написан на jQuery; но делает его намного проще).