table in javascript

Question

i am appending a new row to the end of a table by using appendrow() , but it doesnt work , can anybody help me .

htm:

<body onload="makeTable()">
<table id= "tbl" border="1"></table>
<form>
<input type="button" value=" append a new row " onclick="appendRow()" /><br />
</form>

js:

 function makeTable(){
var theTable =document.getElementById("tbl");
if (theTable.firstChild != null)
     {
      var badIEBody = theTable.childNodes[0];  
      theTable.removeChild(badIEBody);
}
var tBody = document.createElement("TBODY");
theTable.appendChild(tBody);

var newRow = document.createElement("tr");
var c1 = document.createElement("td");
var v1 = document.createTextNode("HIT6307");
c1.appendChild(v1);
newRow.appendChild(c1);
var c2 = document.createElement("td");
var v2 = document.createTextNode("Internet Technology");
c2.appendChild(v2);
newRow.appendChild(c2);
tBody.appendChild(newRow);

}

function appendRow() {
  var code = prompt("What is the code of subject", "Type code here");
  var name = prompt("What is the name of subject", "Type name here");

  var tBody = document.getElementByTagName("TBODY");
  newRow = document.createElement("tr");
c1 = document.createElement("td");
v1 = document.createTextNode("code");
c1.appendChild(v1);
newRow.appendChild(c1);
c2 = document.createElement("td");
v2 = document.createTextNode("name");
c2.appendChild(v2);
newRow.appendChild(c2);
tBody.appendChild(newRow);

     tBody.appendChild(newRow);
}

@DrStrangeLove its " document.getElementByTagName is not a function" — niha
– niha, Commented Jun 4, 2011 at 10:52

manji · Accepted Answer · 2011-06-04 11:20:16Z

1

There is no function getElementByTagName in javascript but getElementsByTagName` (list of elements).

Also, you are filling the new text elements with string constants ("code" & "name") not the value of corresponding variables:

v1 = document.createTextNode("code");

-->
v1 = document.createTextNode(code);

You should write appendRow like the following:

function appendRow() {
    var code = prompt("What is the code of subject", "Type code here");
    var name = prompt("What is the name of subject", "Type name here");

    var tBody = document.getElementsByTagName("TBODY")[0];

    newRow = document.createElement("tr");
    c1 = document.createElement("td");
    v1 = document.createTextNode(code);
    c1.appendChild(v1);
    newRow.appendChild(c1);

    c2 = document.createElement("td");
    v2 = document.createTextNode(name);
    c2.appendChild(v2);
    newRow.appendChild(c2);

    tBody.appendChild(newRow);
}

Demo with row deletion: http://jsfiddle.net/Wqjhj/

edited Jun 4, 2011 at 11:20

answered Jun 4, 2011 at 10:56

manji

48k5 gold badges98 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

niha Over a year ago

@maniji i tried it deleting a row when i clicked on the button but how a row can be selected here?

DrStrangeLove · Accepted Answer · 2011-06-04 10:56:16Z

1

function appendRow() {
  var code = prompt("What is the code of subject", "Type code here");
  var name = prompt("What is the name of subject", "Type name here");

  var tBody = document.getElementsByTagName("TBODY")[0];
  newRow = document.createElement("tr");
c1 = document.createElement("td");
v1 = document.createTextNode(code);
c1.appendChild(v1);
newRow.appendChild(c1);
c2 = document.createElement("td");
v2 = document.createTextNode(name);
c2.appendChild(v2);
newRow.appendChild(c2);
tBody.appendChild(newRow);

     tBody.appendChild(newRow);
}

answered Jun 4, 2011 at 10:56

DrStrangeLove

11.6k16 gold badges63 silver badges73 bronze badges

1 Comment

manji Over a year ago

you should remove quotes in createTextNode("code"); & createTextNode("name");

Collectives™ on Stack Overflow

table in javascript

2 Answers 2

Demo with row deletion: http://jsfiddle.net/Wqjhj/

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo with row deletion: http://jsfiddle.net/Wqjhj/

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related