Hello, I have found a script that dynamically add a row to a table. I adapted it to my need ... and it works fine with IE but not with Firefox.... I have a rather complicated structure... several tables with tbody. With FireFox, the instruction that gives problem is: var nextRow = tbl.tBodies[0].rows.length; in the function "addRowToTable(val) Could you please help me... The application has to work on both browsers. <html> <head> <title>Insert/Delete Table Row using DOM</title> <style type="text/ccs"> <!-- #tblSample td,th {padding:0.5em;} .classy0 { background-color: #234567; color:#89abcd;} .classy1 {background-color: #89abcd; color:@234567;} --> </style> <script language="javascript"> var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script var RADIO_NAME = 'totallyrad'; // this is being set via script var TABLE_NAME = 'sc_services'; // this should be named in the HTML var ROW_BASE = 1; // first number (for display) function addRowToTable(val) { var tbl = document.getElementById(TABLE_NAME); alert("Entering addRowToTable..."); var nextRow = tbl.tBodies[0].rows.length; alert("nextRow="+nextRow); var iteration = nextRow + ROW_BASE; num = nextRow; // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - index var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text var cell1 = row.insertCell(1); var txtInp = document.createElement('input'); var txtInp = document.createElement('input'); txtInp.setAttribute('type', 'text'); txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('size', '20'); txtInp.setAttribute('value', val); // iteration included for debug purposes cell1.appendChild(txtInp); // cell 2 - input button var cell2 = row.insertCell(2); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell2.appendChild(btnEl); var cell3 = row.insertCell(3); var raEl; try { raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">'); var failIfNotIE = raEl.name.length; } catch(ex) { raEl = document.createElement('input'); raEl.setAttribute('type', 'radio'); raEl.setAttribute('name', RADIO_NAME); raEl.setAttribute('value', iteration); } cell3.appendChild(raEl); } function deleteCurrentRow(obj) { alert("delete to be done"); } function showAll() { document.getElementById("tb1").style.display=""; document.getElementById("tb2").style.display=""; } </script> <body onLoad=showAll()> <form onSubmit="return false" method="post" name="my_form" action=""> <table border =0> <tr> <td> <table border=2> <tr><th>ServiceCompositions</th></tr> <tr> <td> <div style="width: 200px; height: 200px; overflow: scroll;"> <table> <tr><td>test1</td></tr> </table> </div> </td> </tr> <tr id="generalButtons"> <td><input type=button value="Add" onClick=addRowToTable('test1')> </tr> </table> </td> <td> <table border=2> <tbody id='tb1' style='display: none;'>> <tr><td>Id: <input type=text name="id"></td></tr> <tr><td> <div style="width: 300px; height: 200px; overflow: scroll;"> <table border="0" cellspacing="0" id="sc_services"> <thead><tr><th colspan="3">Services</th><th>Insert</th></tr></thead> </table> </div> </tr></td> </table> </td> </tr></table> </form> </body> </html> Code (markup):
That is because you are referring to an element that does not exist. Replace lines 112-115, ie <table border="0" cellspacing="0" id="sc_services"> <thead><tr><th colspan="3">Services</th><th>Insert</th></tr></thead> </table> Code (markup): with <table border="0" cellspacing="0" id="sc_services"> <thead><tr><th colspan="3">Services</th><th>Insert</th></tr></thead> <tbody></tbody> </table> Code (markup): and the script will work fine