In Firefox insertRow() is not working in javascript

I am working in a JSP file. In that I need to create one table with multiple rows onclick event. When I am trying the following code in IE7 and IE8, it is working fine. But when I am trying the same in Firefox[ (in any version) it is 开发者_如何学Cnot creating the table.

This is the div part I need to create ,

<div id="acc" style="display:none" width="90%">
    <table border=0 cellpadding=1 cellspacing=1 width="97%" align="center">
        <tr>
            <td class="txnSubHdrBg">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td nowrap>Account Details</td>
                        <td align="right">
                        <table border="0" cellspacing="0" cellpadding="0">
                          <tr>                            
                            <td style="padding-right:2px;" valign="top"><a href="javascript:void(0)"><img src="/images/add_account_but.jpg" border="0"  alt="Add account credit details" onclick="return addAccountRow(); return false;"/></a></td>
                          </tr>
                        </table>
                        </td>
                    </tr>
                </table>                            
            </td>
        </tr>
    </table>
    <% int rowId=0;%>
    <table border=0 cellpadding=1 cellspacing=1 width="97%" id="AccountList" align="center" > 
        <logic:iterate name="xMBeneficiaryRegistrationForm"  property="beneficiaryAccountList" id="row">                            
            <tr><td>
                <table cellpadding=0 cellspacing=6 width="100%">
                <tr>

                    <html:hidden name="row" property="accountSerialNo"/>
                    <td class="fieldLabel" width="180"><bean:message key="XpressMoney.Xpress.AccountName"/></td>
                    <td class="fldtxt">
                        <html:text name="row"  property="accountName" styleClass="fieldText" size="20"  tabindex="27" style="width:167px" title="Input Account Name" onkeypress="return AcceptableCharsforAddress(event); return false;"/>
                        <span class="fieldLabel" ><bean:message key="label.mamStatus"/></span>
                        <html:select property="accountStatusDisplay" tabindex="28" styleClass="fieldText" size="1">
                        <html:option value="1"><bean:message key="XpressMoney.XM.Enable"/></html:option>
                        <html:option value="1073741824"><bean:message key="XpressMoney.XM.Disable"/></html:option>
                        </html:select>
                    </td>
                </tr>
                <tr>
                    <td class="fieldLabel"><bean:message key="XpressMoney.Xpress.AccountNo"/></td>
                    <td class="fldtxt">
                        <html:text name="row"  property="accountNo" tabindex="29" styleClass="fieldText" onkeypress="return AcceptCharsandNumbers(event)" style="width:167px;padding:0 0 0 3px"  size="20" title="Input Account No"/>
                    </td>
                </tr>                                   
                <tr>
                    <td align="left" class="fieldLabel">Bank Name</td>
                    <td class="fldtxt"> 
                    <input type="hidden" name="beneficiaryBankTemp" value=<bean:write name="row"  property="beneficiaryBank"/>>
                    <select class="fieldText" style="width:250px" name="beneficiaryBank" onchange="retrieveDestinationBeneficiaryBankName(<%=rowId%>)" >
                         <option value="0">--select Bank--</option>
                    </select>   
                    </td>
                </tr>                           
                <tr>
                    <td align="left" class="fieldLabel">Beneficiary Bank</font></td>
                    <td class="fldtxt"> 
                    <input type="hidden" name="beneficiaryBankNameTemp" value=<bean:write name="row"  property="beneficiaryBankName"/>>                                         
                    <select class="fieldText" style="width:250px" name="beneficiaryBankName" onchange="setSelectedBankValuesToHidden();">
                         <option value="0">--select Beneficiary Bank--</option>
                    </select>
                    </td>

                </tr>                   


                </table>
            </td>
            </tr>
        </logic:iterate>                
    </table>
    <%rowId++;%>

The function which I have for addrows is,

function addAccountRow()
{
    var AccountListTable = document.getElementById('AccountList');
    receivingAgentCodeIndex = AccountListTable.rows.length; 
        var countryBankHTML = "<input type ='hidden' name='beneficiaryBankTemp' value=''/><select class='fieldText' name='beneficiaryBank' id='beneficiaryBank'"+receivingAgentCodeIndex+"' onchange='return retrieveDestinationBeneficiaryBankName("+receivingAgentCodeIndex+"); return false;'  style='background-color:#FFFFFF;width:250px' maxlength='60'  ><option value='0'>---Select Bank---</option></select>"
        var countryBeneficiaryBankHTML = "<input type ='hidden' name='beneficiaryBankNameTemp' value=''/><select class='fieldText' name='beneficiaryBankName' id='beneficiaryBankName'"+receivingAgentCodeIndex+"' onchange='setSelectedBankValuesToHidden();'  style='background-color:#FFFFFF;width:250px'  maxlength='30' <option value='0'>---Select Beneficiary Bank---</option></select>" ;

    var index = AccountListTable.rows.length;   
    if (validateAccountFields(index))
    {
        var AccountListTableRow = AccountListTable.insertRow();
        AccountListTableRow.setAttribute("id",index); 


        var AccountFieldsHTM1 =" <table border=0 cellpadding=0 cellspacing=5 width='100%' id='AccountList1' style='padding:0 0 0 0'><tr><input type ='hidden' name='accountSerialNo'/>"+
                "<td class='fieldLabel' width='181'><bean:message key='XpressMoney.Xpress.AccountName'/></td>"+
                "<td class='fldtxt'><input type='text' name='accountName' class='fieldText' size='20'  style='width:167px' title='Input Account Name' onkeypress='return AcceptableCharsforAddress(event); return false;'/>"+
                "&nbsp;<span class='fieldLabel'><bean:message key='label.mamStatus'/></span>"+
                "<select name='accountStatusDisplay' class='fieldText' size='1'><option value='1' selected><bean:message key='XpressMoney.XM.Enable'/></option><option value='1073741824'><bean:message key='XpressMoney.XM.Disable'/></option></select></td></tr>"+
                "<tr><td class='fieldLabel'><bean:message key='XpressMoney.Xpress.AccountNo'/></td>"+
                "<td class='fldtxt'><input type='text' name='accountNo' class='fieldText' onkeypress='return AcceptCharsandNumbers(event)'  size='20' style='width:167px' title='Input Account No'/></td></tr>"     
                + "<tr><td class='fieldLabel'  >Bank Name</td><td class='fldtxt' >"+countryBankHTML+"</td></tr>"
                + "<tr><td class='fieldLabel'  >Beneficiary Bank</td><td class='fldtxt' >"+countryBeneficiaryBankHTML+"</td></tr></table>"





        var AccountCredit = AccountListTableRow.insertCell();
        AccountCredit.insertAdjacentHTML('afterBegin',AccountFieldsHTM1);
        retrieveDestinationCountryDetailsV1(receivingAgentCodeIndex); 
    }
}

How can I make it Firefox compatible?

See https://developer.mozilla.org/en/DOM/table.insertRow:

If index is omitted or greater than the number of rows, an error will result.

I'd suggest using a cross-browser JavaScript library like jQuery, which will work whatever the browser is.

Here is a solution:

var row = infoTable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell); 

See https://developer.mozilla.org/en/traversing_an_html_table_with_javascript_and_dom_interfaces

You should use DOM method in FF/XUL. Check the above link, the code given there works fine in IE & FF.

Even, I would suggest you to use jQuery is the most recommendable one.

Use

var tr = document.createElement("TR");
AccountListTable.rows.append(tr)

or

var lastRow = AccountListTable.rows.length;
var row = AccountListTable.insertRow(lastRow);

I would use JQuery: http://api.jquery.com/

There is a similar question with an answer using JQuery: Add table row in jQuery

Please let us know if using JQuery is not an option.