The following basic script works fine in firefox by not in IE. Can anyone
spot the problem? In IE I can only delete the first line but not the lines
created by javascript. Also, look at the HTML code for the first line
(click the Table HTML button:)) you will fine that the code displayed is not
the same as
was written. "onChange" was changed to "onchange" etc. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator " content="PSPad editor, www.pspad.com">
<title>testin g tables</title>
<script type="text/javascript">
<!-- Begin Add Row to Itemlist Table
function addRowToTable() {
var tbl = document.getEle mentById('iteml ist');
var lastRow = tbl.rows.length ;
var row = tbl.insertRow(l astRow);
// qty cell
var qty2 = row.insertCell( 0);
var el_qty = document.create Element('input' );
el_qty.setAttri bute('type', 'text');
el_qty.setAttri bute('name', 'qty');
el_qty.setAttri bute('size', '7');
el_qty.setAttri bute('maxlength ', '7');
el_qty.setAttri bute('onChange' , 'calc_total()') ;
qty2.appendChil d(el_qty);
// price cell
var price2 = row.insertCell( 1);
var el_price = document.create Element('input' );
el_price.setAtt ribute('type', 'text');
el_price.setAtt ribute('name', 'cost');
el_price.setAtt ribute('size', '7');
el_price.setAtt ribute('maxleng th', '7');
el_price.setAtt ribute('onChang e', 'calc_total()') ;
price2.appendCh ild(el_price);
// remove me cell
var D = row.insertCell( 2);
//D.innerHTML='<a href="javascrip t:removeRowFrom Table(this)">-</a>'
D.setAttribute( 'onClick','remo veRowFromTable( this)');
var el_txt = document.create TextNode("-");
D.appendChild(e l_txt);
}
//
function getRowIndex (cell) {
return document.all ? cell.parentElem ent.rowIndex :
cell.parentNode .rowIndex;
}
//Remove a row from the table
function removeRowFromTa ble(cell){
//alert ("start function");
var tbl = document.getEle mentById('iteml ist');
var lastRow = tbl.rows.length ;
//alert (lastRow);
var rowToDelete = getRowIndex(cel l);
//alert (rowToDelete);
if (lastRow > 2) tbl.deleteRow(r owToDelete);
}
// Calculate the total
function calc_total() {
//Do Nothing yet
}
function showtableinnerh tml(){
alert(document. getElementById( 'itemlist').inn erHTML);
}
//-->
</script>
</head>
<body>
<form name="myform" method="post" action="myform. php">
<table id="itemlist" border="1">
<tr><th>Qty</th><th>Cost</th><th>-</th></tr>
<tr>
<td>
<input type="text" name="qty" size="7" maxlength="7"
onChange="calc_ total()">
</td>
<td>
<input type="text" name="cost" size="7" maxlength="7"
onChange="calc_ total()">
</td>
<td onClick="remove RowFromTable(th is)">-</td>
</tr>
</table>
<hr>
<table id="totalcost" border="1">
<tr>
<td>
<input type="text" size="7" name="test" readonly>
</td>
<td>
<input type="text" size="7" name="total" readonly>
</td>
</tr>
</table>
<input type="button" value="TableHTM L" onclick="showta bleinnerhtml()" >
<input type="button" value="Add" onclick="addRow ToTable();">
</form>
</body>
</html>
