asked on

Javascript modify table on the documents -- inconsistent betwee fireFox and IE

See this example:

http://cs330.blueearthconnections.org/Josh/classwork/student_grades.html

You can enter name/scores and then hit "print table" to print a grade table below the buttons.
It seems working for fireFox, but if you use IE it gives you a run-time error. What can I do on the IE settings to get around this?

The code seem suppose to insert rows in a table already exist on the page.

Please help and thanks in advance

ASKER CERTIFIED SOLUTION

Jeffrey Dake

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Michel Plungjan

You cannot use innerHTML to add to a table.

You MIGHT have better luck adding a TBODY and add to that, but using the DOM is much safer and much more correct as jman56 suggested

Additional make a function that passes in the grade so you do not have to repeat all that html

For example:

function createRow(average) {
  var color, grade;

  if(average >= 90 && average <= 100) { color="green"; grade="A"}
  else if (average >= 80 && average < 90) { color="blue"; grade="B"}
.
.
.
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.className="center";
  td1.style.fontWeight="bold"'
  td1.innerHTML="Average";
  var td2 = document.createElement("td");
  td2.innerHTML=average.toFixed(2);
  var td3 = document.createElement("td");
  td3.className=color;
.
.
  row.addChild(td1).addChild(td2).addChild(td3);
  document.getElementById('table_area').addChild(row);

Open in new window

zzhang2006

ASKER

Thanks