2

I'm a total javascript noobie. I developed the code bellow following and modifing some random tutorial I found. It should add and remove rows with input fields at a table, however, it does nothing. It also worth saying that I called the function as a link. I added 'javascript:addRow()' inside the tag and at the header. Did I missed something?

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--;
    }


}
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
illichosky
  • 157
  • 1
  • 3
  • 10
  • Try to use jQuery: http://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery – Kath Feb 15 '12 at 18:36
  • Can you show your actual HTML? Also, if this is in the `head` of the document, it might be worth putting it into a `script` block at the foot of the page (before the `

    ` tag), to ensure the relevant elements are present in the document *before* binding events.

     – David Thomas Feb 15 '12 at 18:49

2 Answers2

1

You have several errors, but here is the basic working model. I think you should be able to sort it out from here

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); 
    }
}
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Thank you very much. Already did some modifications, it's working fine at jsFiddle. However, when I tried to run at my page, still does nothing... Any idea what could be happening? – illichosky Feb 16 '12 at 15:44
  • @illichosky - take a look at your debugger. If you are using Chrome (recommended by me) press F12. This will open the developer tools. In the bottom left there is the console button. This will show you error messages. Try using your buttons and see what happens. There is probably a syntax error somewhere that prevents the whole thing from running. http://www.youtube.com/watch?v=syJcortvE90 – mrtsherman Feb 16 '12 at 15:46
  • Didn't know this feature. It's showing this error: "Uncaught TypeError: Cannot read property 'length' of undefined" from the line "var rowCount = table.rows.length;" – illichosky Feb 16 '12 at 15:59
  • This means that either table or rows is undefined. So there is nothing for it to read from. Check that table exists. – mrtsherman Feb 16 '12 at 17:16
  • Finally god it right. I misplaced the id tag from the table. Now everything is working fine. Thanks – illichosky Feb 16 '12 at 17:24
0

The error is here:

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

It should be 

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

and similar for the other elements.

You declare the variable with 

var element1 = 'something';

and then access it with 

element1 = 'something different';

Also there is a typo in 

var cel1=row.insertCell(0);

It needs to be 

var cell1=row.insertCell(0);

Additionally you did not define element 2 and 3, used cell2 twice where it should be cell2 and cell3 and only appended to cell1.

Tim
  • 2,430
  • 19
  • 20