在 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

请参阅https://developer.mozilla.org/en/DOM/table.insertRow：

如果索引被省略或大于行数，则会出现错误
结果。

我建议使用像 jQuery 这样的跨浏览器 JavaScript 库，它可以在任何浏览器上运行。

Answer 2

这是一个解决方案：

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

Answer 3

请参阅 https://developer.mozilla.org/en/traversing_an_html_table_with_javascript_and_dom_interfaces

你应该在 FF 中使用 DOM 方法/XUL。检查上面的链接，那里给出的代码在 IE 和 IE 中运行良好。 FF。

甚至，我建议你使用jQuery是最值得推荐的一种。

Answer 4

使用

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

或

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

Answer 5

我会使用 JQuery： http://api.jquery.com/

有一个类似的问题和答案使用 JQuery：
在 jQuery 中添加表格行

如果无法使用 JQuery，请告知我们。