В Firefox insertRow () не работает в JavaScript

Question

Я работаю в файле JSP.В этом мне нужно создать одну таблицу с несколькими строками события onclick.Когда я пытаюсь следующий код в IE7 и IE8, он работает нормально.Но когда я пытаюсь сделать то же самое в Firefox [(в любой версии), он не создает таблицу.

Это часть div, которую мне нужно создать,

<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++;%>

Функция, которую я имею для addrows,

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); 
    }
}

Как я могу сделать его совместимым с Firefox?

Answer 1

Вот решение:

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

Answer 2

См. https://developer.mozilla.org/en/DOM/table.insertRow:

Если индекс опущен или превышает число строк, то возникнет ошибка.

Я бы рекомендовал использоватьJavaScript-библиотека браузера, такая как jQuery, которая будет работать независимо от браузера.

Answer 3

См. https://developer.mozilla.org/en/traversing_an_html_table_with_javascript_and_dom_interfaces

Вы должны использовать метод DOM в FF / XUL. Проверьте ссылку выше, код, указанный там, прекрасно работает в IE & FF.

Даже, я бы посоветовал вам использовать jQuery - самый рекомендуемый.

Answer 4

Я бы использовал JQuery: http://api.jquery.com/

Есть похожий вопрос с ответом с использованием JQuery: Добавить строку таблицы в jQuery

Пожалуйста, сообщите нам, если использование JQuery не вариант.

Answer 5

Использование

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

или

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