2013-12-17 3 views
0

Я попытался создать адресную книгу JavaScript и хотел показать его в таблице html, но это не сработает. Смысл: если я нажму кнопку добавления контакта, я смогу заполнить данные в окне подсказки. после этого я вижу результат в таблице, но вместо этого ... нет таблицы! и я не могу добавить новый контакт. Как я могу решить эту проблему?javascript addressbook in html table

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> 
+0

есть какая-либо ошибка в консоли браузера ?? – BlackPOP

+0

Ждите, не закрывайте это! – user1596138

+0

@ Jhawins это обман. – rlemon

ответ

0

попробовать что-то по следующим направлениям:

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/

+0

Я не вижу результата в таблице. В jsfiddle тоже – FFBbodie

+0

Вы нажали кнопку show на первом JSFiddle? Я также опубликовал второй пример, который автоматически обновляет таблицу. – AeroX

+0

oooh извините моя ошибка .. но означает «null» false? – FFBbodie

0

Это потому, что вы используете "document.write()". Эта функция перезаписывает содержимое вашего документа и вставляет указанный текст. То, что вы хотите сделать, это добавить строку в таблицу.

Вы можете проверить этот пример (который написан в jQuery, но делает его намного проще).

+0

это правильно, но я предпочитаю делать это без jquery. – FFBbodie