在表中添加和删除行 [带输入字段]

Question

我是个 JavaScript 新手。我开发了下面的代码，并修改了我发现的一些随机教程。 它应该在表中添加和删除带有输入字段的行，但是，它什么也不做。值得一提的是，我将该函数称为链接。我在标签内和标题处添加了“javascript:addRow()”。我错过了什么吗？

function addRow(){

tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

if(rowCount<7){

    var row = table.insertRow(rowCount);

    var cel1=row.insertCell(0);
    var element1= document.createElement("input");
    var element1.type="text";
    cell1.appendChild(element1);

    var cell2=row.insertCell(1);
    var element2.type="text";
    cell1.appendChild(element2);

    var cell2=row.insertCell(2);
    var element3.type="text";
    cell1.appendChild(element3);

    rowCount++;

}

}

function removeRow(){

    tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

if(rowCount>1){
    table.deletRow(rowCount);
    rowCount--;
    }


}

Answer 1

错误在这里：

var element1= document.createElement("input");
var element1.type="text";

应该是

var element1= document.createElement("input");
element1.type="text";

其他元素也类似。

你用

声明变量

var element1 = 'something';

然后用

访问它

element1 = 'something different';

还有一个错别字

var cel1=row.insertCell(0);

应该是

var cell1=row.insertCell(0);

另外，您没有定义元素 2 和 3， 使用 cell2 两次，它应该是 cell2 和 cell3，并且只附加到 cell1。

Answer 2

您有几个错误，但这是基本的工作模型。我想你应该可以从这里整理出来

http://jsfiddle.net/dBzkX/

function addRow() {

    var tableID="ticketCreate";
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    if(rowCount<7){
        //You declared var in front of the same variable twice. Don't do that.
        //You were appending cells inside existing cell. Add them to row instead.
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement('input');
        element1.type="text";
        cell1.appendChild(element1);
        row.insertCell(1);
        row.insertCell(2);
    }
}

function removeRow(){
    var tableID="ticketCreate";
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    if(rowCount>1){   
        //you had type in deletRow. Also, you can pass in -1 to remove the last row        
        table.deleteRow(-1); 
    }
}