...

View Full Version : Dynamic table works in Firefox, fails in IE



ratbastid
01-31-2006, 10:12 PM
This script is supposed to take new submissions for contact information from a representative of the company. The idea is, they click the "+" button, and I create a new row of fields for them to fill in. They'll click themselves as many rows as they need right now, and I'll process however many they give me in PHP.

The script looks like this:


<script type="text/javascript">

var fieldCount = 1;

function addfields() {


var newrow = document.createElement('tr');

var firsttd = document.createElement('td');
firsttd.appendChild(document.createTextNode('&nbsp;'));
newrow.appendChild(firsttd);

var secondtd = document.createElement('td');
var compfield = document.createElement('input');
compfield.type = 'text';
compfield.name = "Company_Name" + fieldCount;
compfield.id = "Company_Name" + fieldCount;
secondtd.appendChild(compfield);
newrow.appendChild(secondtd);

var thirdtd = document.createElement('td');
var cfirst = document.createElement('input');
cfirst.type = 'text';
cfirst.name = 'Contact_Firstname' + fieldCount;
cfirst.id = 'Contact_Firstname' + fieldCount;
thirdtd.appendChild(cfirst);
newrow.appendChild(thirdtd);

var fourthtd = document.createElement('td');
var clast = document.createElement('input');
clast.type = 'text';
clast.name = 'Contact_Lastname' + fieldCount;
clast.id = 'Contact_Lastname' + fieldCount;
fourthtd.appendChild(clast);
newrow.appendChild(fourthtd);

var fifthtd = document.createElement('td');
var email = document.createElement('input');
email.type = 'text';
email.name = 'Email' + fieldCount;
email.id = 'Email' + fieldCount;
fifthtd.appendChild(email);
newrow.appendChild(fifthtd);

var sixthtd = document.createElement('td');
var fax = document.createElement('input');
fax.type = 'text';
fax.name = 'Fax' + fieldCount;
fax.id = 'Fax' + fieldCount;
sixthtd.appendChild(fax);
newrow.appendChild(sixthtd);

var seventhtd = document.createElement('td');
var phone = document.createElement('input');
phone.type = 'text';
phone.name = 'Phone' + fieldCount;
phone.id = 'Phone' + fieldCount;
seventhtd.appendChild(phone);
newrow.appendChild(seventhtd);

var newvend = document.getElementById('newvend');
newvend.appendChild(newrow);

fieldCount++;

}
</script>


... and the section in question of the form looks like:


<table id="newvend">
<tr id="newvendheader"><td><button onclick="addfields(); return false;">+</button></td><td>Company Name</td><td>Contact First</td><td>Contact Last</td><td>Email</td><td>Fax</td><td>Phone</td></tr>
<tr id="newvendrow"><td>&nbsp</td><td><input type="text" name="Company_Name"></td><td><input type="text" name="Contact_Firstname"></td><td><input type="text" name="Contact_Lastname"></td><td><input type="text" name="Email"></td><td><input type="text" name="Fax"></td><td><input type="text" name="Phone"></td></tr>
</table>


I tried this with a <tbody> wrapped inside the <table>, no help.

None of this gives an error in IE, it just doesn't do the appending. Works great in Firefox and Safari.

Any suggestions?

Kor
02-01-2006, 11:18 AM
It is a matter of HTML rather, as the TABLE must have a TBODY (from the interpretor's point of view) . In fact TBODY is HTML mandatory, but Javascript compulsory. Even if the TBODY is not HTML written, Javascript "sees" it, so that the rows' parent should be TBODY, not TABLE.

var newvend = document.getElementById('newvend').getElementsByTagName('tbody')[0];

Note that getElementsByTagName('tbody') returns a collection (as a table can have more than one tbody element). This is the reason for you must use the index [0] to specify that it is the first tbody of the table.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum