在Javascript中编辑表值的行

时间:2015-12-10 12:45:46

标签: javascript html html-table row edit

我通过html页面上的输入表在Javascript中创建了一个表。我在Javascript表上添加了一个删除和编辑按钮,所以当它返回值时,这两个按钮会出现在每行添加的末尾。但是,我根本无法获得任何类型的编辑按钮。我到处寻找。谁能帮我? 我有一个整个程序的jsFiddle。

http://jsfiddle.net/aabbey0411/c46d9n2e/

这是我创建按钮的地方:

   /**
 * This function returns a row of an HTML table containing the contact data.
 */
Contact.prototype.tableRow = function() {
    var deleteButton = "<button id ='delete'  onclick= 'deleteRow(this)'>Delete</button>"
    var editButton = "<button id ='edit'  onclick='editRow(this)'>Edit</button>"
    var tr = "</td><td>" + this.forename + "</td><td>" + this.surname + "</td><td>" + this.category + "</td><td>" + this.dob + "</td>" +
        "<td>" + this.marital_status + "</td><td>" + this.phone + "</td><td>" + this.email + "</td><td>" + this.address + "</td>" +
        "<td>" + this.postcode + "</td><td>" + this.notes + "</td>"  +
        "<td>" + editButton + "</td>" + "<td> " + deleteButton + "</td></tr>";

    return tr;


};


/* This function builds the HTML table, using the input of contact details
     */
    var updateList = function () {
        var tableDiv = document.getElementById("table"),
            table = "<table border='1'><thead><th>Forename</th><th>Surname</th><th>Category</th><th>Date of Birth</th>" +
               "<th>Status</th><th>Phone Number</th><th>Email Address</th><th>Address</th><th>Postcode</th><th>Notes</th></thead>";

        for (var i = 0, j = contacts.length; i < j; i++) {
            var cont = contacts[i];
            table+= cont.tableRow();
        }

        table+= "</table>";
        tableDiv.innerHTML = table;


    };

 var showTable = function () {
        var tableDiv = document.getElementById("table"),
            table = "<table border='1'><thead><th>Forename</th><th>Surname</th><th>Category</th><th>Date of Birth</th><th>Status</th><th>Phone Number</th>" +
                "<th>Email Address</th><th>Address</th><th>Postcode</th><th>Notes</th><th>Delete</th></thead>";

        for(var i=0, j=contacts.length; i<j; i++){
            var cont = contacts[i];
            table += cont.tableRow();
        }
        table+="</table>";
        tableDiv.innerTML = table;
    };

0 个答案:

没有答案