In Firefox insertRow() is not working in javascript

Question

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 not 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?

if you want help, you should accept answers from your previous questions (click on the tick on the left of the best answer). If you don't care about the answers that were given to you, why would we care about your new questions? — JMax, Sep 27 '11 at 12:40
Sorry JMax.. i am new to this stackoverflow.. surely i ll do the tick once i get the expected result. — Nagarajan, Sep 27 '11 at 13:21
You can also have a look at your previous questions (click on your name in your signature to find your whole activity) and accept these answers, users who have answered you are probably awaiting for this. Plus, this helps further research because the accepted answer is displayed first. — JMax, Sep 27 '11 at 13:30
the code you are posting is just too much; you should try to isolate the problem. If I am correct you are even using struts tags; this way, it's (nearly) impossible for me to try a few things and test it to help you. One thing you should try is: insertRow(-1); this works in all usual browsers; it inserts a row in a table as last row. — Tom, Mar 27 '12 at 14:36

score 2 · Answer 1 · answered Sep 27 '11 at 12:44

2

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.

answered Sep 27 '11 at 12:44

JB Nizet

678,734
91
1,224
1,255

score 2 · Answer 2 · edited Mar 27 '12 at 17:07

2

Here is a solution:

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

edited Mar 27 '12 at 17:07

Bo Persson

90,663
31
146
203

answered Mar 27 '12 at 14:23

sun

21
1

score 1 · Answer 3 · answered Sep 27 '11 at 13:45

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.

score 0 · Answer 4 · answered Sep 27 '11 at 12:43

0

Use

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

or

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

answered Sep 27 '11 at 12:43

hungryMind

6,931
4
29
45

i cant use JQuery , i need to use javascript only. Is there any other trick is thr? hungryMind i tried ur way also, same issue only cuming.. – Nagarajan Sep 27 '11 at 13:12
can u give me sample with tbody? wer i need to add tbody? in that div part or in the addrow function? – Nagarajan Sep 27 '11 at 13:20
try adding following style to your element. display='table-row' for rows and display= 'table-cell' for cells – hungryMind Sep 27 '11 at 13:42

score -1 · Answer 5 · edited May 23 '17 at 12:00

-1

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.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 27 '11 at 12:45

kralco626

8,456
38
112
169

In Firefox insertRow() is not working in javascript

5 Answers5