CODEWITHSUNDEEP
javascripthtmlinnerhtmlappendchild
benwaffle
benwaffle

Reputation: 332

Can't add new row to table

function load(){
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
    var tablebody = document.getElementById("classestable");
    tablebody.innerHTML += "<tbody></tbody>";
    tablebody.getElementsByTagName("tbody").innerHTML = "";
    for(var i=0;i<15;i++){
        tablebody.getElementsByTagName("tbody").innerHTML += row;
    }
}

The code above runs fine except the contents of row does not get added to tbody.

console.log shows that the contents of row is valid html and there are no errors in the console. Why is that not being added?

Upvotes: 1

Views: 516

Answers (4)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You cannot use innerHTML on tables in Internet Explorer, getElementsByTagName returns a NodeList rather than a single node, and besides tables have a tBodies property.

Your revised code should be:

function load(){
  var tr = document.createElement('tr'), td;
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select>";
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<input id=\"choosemods\" type=\"text\" />";
  td = tr.appendChild(document.createElement('td'));
  td.innerHTML = "<input id=\"choosegrade\" type=\"text\" />";
  var tablebody = document.getElementById("classestable").tBodies[0];
  for(var i=0;i<15;i++){
      tablebody.appendChild(tr.cloneNode(true));
  }
}

Upvotes: 2

Nerdroid
Nerdroid

Reputation: 13966

getElementsByTagName returns a NodeList and you access it the first node using the index of the node

I would change the code to the following

var innerRow = "";

for(var i=0;i<15;i++){
    innerRow += row;
}

tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow

this way you only scanning the DOM once not 15 times

Upvotes: 3

mgh
mgh

Reputation: 11

You could try using a query selector instead of getElementsByTagName.

document.querySelector('#classettable tbody').innerHTML += row;

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

There is no point adding to dom each time the loop runs. Add it to an html variable and do one dom transaction.

function load(){
    var html= '';
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
    var tablebody = document.getElementById("classestable");
    tablebody.innerHTML += "<tbody></tbody>";
    tablebody.getElementsByTagName("tbody").innerHTML = "";
    for(var i=0;i<15;i++){
        html += row;
    }
    tablebody.getElementsByTagName("tbody")[0].innerHTML = html;// Select first element from array of nodes
}

Upvotes: 0

Related Questions