Javascript code

Browser conflict

[Punter]

I have a javascript code which works well with Mozilla Firefox but does not work with IE 6 or IE 7.

What might be the problem?

Here is the code:-
// this function is called on a button click

var t = document.getElementById('tblApprover');
var lastRow = t.rows.length;
var iteration= lastRow-2;
var selvalues = new Array();

for(var i=1;i<=iteration;i++){
var dropdownIndex=document.forms[0]['optusername'+i].selectedIndex;
selvalues[i]=document.forms[0]['optusername'+i].options[document.forms[0]['optusername'+i].selectedIndex].value;

alert(selvalues[i]);
}

////////////

function AppendRow(srcTable)
{
if(srcTable != null)
{
return srcTable.insertRow();
}
else
{
alert("Error while creating table. Cause: Container Table is null!");
}
}

function AppendCell(srcRow)
{
if(srcRow != null)
{
return srcRow.insertCell();
}
else
{
alert("Error while creating table. Cause: Container row is null!");
}
}

function IsValidNumber(ipNum)
{
if(isNaN(ipNum))
{
alert("Invalid Number!");
return false;
}
else if(ipNum < 1)
{
alert("Number should be greater than 0!");
return false;
}
else
{
return true;
}
}

/**
* Function for add new approver in list
*/
function addRowToTable()
{
var tbl = document.getElementById('tblApprover');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow -1;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// text box
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
//alert(el.name);
el.id = 'txtRow' + iteration;
el.size = 29;

el.onkeypress = keyPressTest;
cellRight.appendChild(el);

// middle combo box
var cellMiddleSel = row.insertCell(2);
var sel0 = document.createElement('select');
sel0.name = 'optusername'+iteration;
sel0.options[0] = new Option('Select Approver Name', 'selectname');
cellMiddleSel.appendChild(sel0);

for(var i=0;i<document.forms[0]['optusername1'].options.length;i++)
{
sel0.options[i] = new Option(document.forms[0]['optusername1'].options[i].text,document.forms[0]['optusername1'].options[i].text);
cellMiddleSel.appendChild(sel0);

}

// Last combo box
var cellRightSel = row.insertCell(3);
var sel1 = document.createElement('select');
sel1.name = 'selCol'+iteration;

sel1.options[0] = new Option('Select Approver Mailid','selectmail');
cellRightSel.appendChild(sel1);
for(var i=0;i<document.forms[0]['optmailid'].options.length;i++)
{
sel1.options[i] = new Option(document.forms[0]['optmailid'].options[i].text,document.forms[0]['optmailid'].options[i].text);
cellRightSel.appendChild(sel1);
}
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}

/*
* For Removing Row from table
*/
function removeRowFromTable()
{
var tbl = document.getElementById('tblApprover');
var lastRow = tbl.rows.length ;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

[daveVk]

Make sure table has tbody, IE is fussy.

[Punter]

Thnx for the reply daveVK
I'm a newbie to Javascript
SO can u pls explain what tbody is in a table..?

[daveVk]

Example of a fully specified table

<table border="1">

<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>

<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>

</table>

Note this one has 3 sections, thead, tbody and tfoot. The head and foot sections can be left out. Best practice is to always include the tbody tags.

[poppyrich]

If tbody is left out, IE inserts it automatically. This will change the number of elements in the table and the relative position of rows and cells within the table.
If the markup is written like this:

<table>
<tr>
<td></td>
</tr>
</table>

IE "sees" this:

<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

[daveVk]

poppyrich, agree but don't know if other browsers do the same, so better to be explicit ?

Following may be relevent.

[bytes.com...]