адресная книга javascript в html-таблице

0

Я попытался создать адресную книгу 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>
  • 0
    есть ли ошибка в консоли браузера?
  • 0
    Подожди, не закрывай это!
Показать ещё 4 комментария
Теги:

2 ответа

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 тоже
  • 0
    Вы нажали кнопку показа на первом JSFiddle? Я также опубликовал второй пример, который автоматически обновляет таблицу.
Показать ещё 4 комментария
0

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню