动态添加行 javascript 函数在 Firefox 中有效，但在 IE 中无效

【问题标题】：Dynamic add row javascript function works in Firefox but not in IE动态添加行 javascript 函数在 Firefox 中有效，但在 IE 中无效
【发布时间】：2009-05-28 11:10:49
【问题描述】： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>  
 <head>  
     <title>:: Gharsansar Spices Order Form ::</title>

<script language="javascript" type="text/javascript">

         function addRow(tableID) 
         {  
            var rowCount;
            var rowno;
            var table = document.getElementById(tableID);  
            rowCount = table.rows.length;  
            var row = table.insertRow(rowCount);
            row.id = "row"+rowCount;            

            rowno = row.id; 

            var cell1 = row.insertCell(0);  
            var element1 = document.createElement("input");  
            element1.type = "checkbox";  
            cell1.appendChild(element1);  

            var cell2 = row.insertCell(1);  
            cell2.innerHTML = rowCount + 1;  
            cell2.className ="style2";  

            var cell3 = row.insertCell(2);
            var e1 = document.createElement('select');
            e1.name = 'Category['+rowCount+']';
            e1.id = 'Category['+rowCount+']';
            e1.setAttribute("onclick","javascript:SelectSubCat(this);");

            choice = document.createElement('option');
            choice.value = ':: Select A Product ::';
            choice.appendChild(document.createTextNode(':: Select A Product ::'));
            e1.appendChild(choice);

            var choice = document.createElement('option');
            choice.value = 'Jalani Jaljira';
            choice.appendChild(document.createTextNode('Jalani Jaljira'));
            e1.appendChild(choice);

            choice = document.createElement('option');
            choice.value = 'Pav Bhaji Masala';
            choice.appendChild(document.createTextNode('Pav Bhaji Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Sambhar Masala';
            choice.appendChild(document.createTextNode('Sambhar Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Sabji Masala';
            choice.appendChild(document.createTextNode('Sabji Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Kitchen King Masala';
            choice.appendChild(document.createTextNode('Kitchen King Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Garam Masala';
            choice.appendChild(document.createTextNode('Garam Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Meat Masala';
            choice.appendChild(document.createTextNode('Meat Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Chat Masala';
            choice.appendChild(document.createTextNode('Chat Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Chicken Masala';
            choice.appendChild(document.createTextNode('Chicken Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Ghar Sansar Jaljira';
            choice.appendChild(document.createTextNode('Ghar Sansar Jaljira'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Dry Ginger Powder';
            choice.appendChild(document.createTextNode('Dry Ginger Powder'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Dry Mango Powder';
            choice.appendChild(document.createTextNode('Dry Mango Powder'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Pudina Powder';
            choice.appendChild(document.createTextNode('Pudina Powder'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Jeera Powder';
            choice.appendChild(document.createTextNode('Jeera Powder'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Black Pepper';
            choice.appendChild(document.createTextNode('Black Pepper'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'White Pepper Powder';
            choice.appendChild(document.createTextNode('White Pepper Powder'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Fennel Powder (Saunf)';
            choice.appendChild(document.createTextNode('Fennel Powder (Saunf)'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Kashmiri Mirch';
            choice.appendChild(document.createTextNode('Kashmiri Mirch'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Kasuri Methi';
            choice.appendChild(document.createTextNode('Kasuri Methi'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Jaljira';
            choice.appendChild(document.createTextNode('Jaljira'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Chana Chole Masala';
            choice.appendChild(document.createTextNode('Chana Chole Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Super Garam Masala';
            choice.appendChild(document.createTextNode('Super Garam Masala'));
            e1.appendChild(choice);
            choice = document.createElement('option');
            choice.value = 'Haldi Powder';
            choice.appendChild(document.createTextNode('Haldi Powder'));
            e1.appendChild(choice);

            choice = document.createElement('option');
            choice.value = 'Dhaniya Powder';
            choice.appendChild(document.createTextNode('Dhaniya Powder'));
            e1.appendChild(choice);

            choice = document.createElement('option');
            choice.value = 'Red Chilli Powder';
            choice.appendChild(document.createTextNode('Red Chilli Powder'));
            e1.appendChild(choice);         
            cell3.appendChild(e1);


            var cell4 = row.insertCell(3);
            e_sub_cat = document.createElement('select');
            e_sub_cat.name = 'SubCat['+rowCount+']';
            e_sub_cat.id = 'SubCat['+rowCount+']';
            cell4.appendChild(e_sub_cat);                   


          var cell5 = row.insertCell(4);
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'quantity[]';
          el.size = 20;
          el.setAttribute("onblur","javascript:check_numeric(this)");  
          cell5.appendChild(el); 

}  

function deleteRow(tableID)
{  
        try {  
        var table = document.getElementById(tableID);  
        var rowCount = table.rows.length;  
        for(var i=0; i<rowCount; i++) 
        {  
        var row = table.rows[i];  
        var chkbox = row.cells[0].childNodes[0];  
        if(null != chkbox && true == chkbox.checked) {  
            table.deleteRow(i);  
                rowCount--;  
              i--;  
             }  
        }  
  }catch(e) {  
     alert(e);  
}  
}  

function check_numeric(control)
{
    var val=control.value;
    var first=val.substring(0,1);
    if(isNaN(val))
    {
        alert("Enter a numeric value only!");
        control.value="";
        control.focus();
    }
    if(first=="-")
    {
        alert("Enter a numeric value only!");
        control.value="";
        control.focus();
    }

    return true;
}

function SelectSubCat(control_value)
{
    // ON selection of category this function will work
    //var sub_cat_id = document.getElementById('SubCat['+rowCount+']').id;
    var sub_cat_id = control_value.id;

    var mySplitResult   = sub_cat_id.split("[");
    var control_no      = mySplitResult[1]; 
    var control_row_no  = control_no.split("]");
    var row_num         = control_row_no[0];

    var i;

    for(i=document.getElementById('SubCat['+row_num+']').options.length-1;i>=0;i--)
    {
        document.getElementById('SubCat['+row_num+']').remove(i);
    }

    if(control_value.value == 'Jalani Jaljira')
    {
        addOption("2.5 gm", "2.5 gm",row_num);
        addOption("5 gm", "5 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
        addOption("150 gm", "150 gm",row_num);
        addOption("300 gm", "300 gm",row_num);
        addOption("500 gm", "500 gm",row_num);
    }

    if(control_value.value == 'Pav Bhaji Masala')
    {
        addOption("15 gm", "15 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
    }

    if(control_value.value == 'Sambhar Masala')
    {
        addOption("50gm", "50gm",row_num);
        addOption("100gm", "100gm",row_num);

    }   

    if(control_value.value == 'Sabji Masala')
    {
        addOption("15 gm", "15 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
    }

    if(control_value.value == 'Kitchen King Masala')
    {
        addOption("15 gm", "15 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);
    }

    if(control_value.value == 'Garam Masala')
    {
        addOption("50gm", "50gm",row_num);
        addOption("100gm", "100gm",row_num);

    }   

    if(control_value.value == 'Meat Masala')
    {
        addOption("15 gm", "15 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
    }

    if(control_value.value == 'Chat Masala')
    {
        addOption("15 gm", "15 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("200 gm", "200 gm",row_num);
    }

    if(control_value.value == 'Chana Masala')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Chicken Masala')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Ghar Sansar Jaljira')
    {
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Dry Ginger Powder')
    {
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Dry Mango Powder')
    {
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Pudina Powder')
    {
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Jeera Powder')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Black Pepper')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'White Pepper Powder')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Fennel Powder (Saunf)')
    {
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);

    }

    if(control_value.value == 'Kashmiri Mirch')
    {
        addOption("100 gm", "100 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);

    }

    if(control_value.value == 'Kasuri Methi')
    {
        addOption("25 gm", "25 gm",row_num);
        addOption("50 gm", "50 gm",row_num);
        addOption("100 gm", "100 gm",row_num);
        addOption("500 gm", "500 gm",row_num);

    }

    if(control_value.value == 'Jaljira')
    {
        addOption("15 gm", "15 gm",row_num);

    }

    if(control_value.value == 'Chana Chole Masala')
    {
        addOption("15 gm", "15 gm",row_num);

    }

    if(control_value.value == 'Super Garam Masala')
    {
        addOption("100 gm", "100 gm",row_num);
        addOption("200 gm", "200 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);

    }

    if(control_value.value == 'Haldi Powder')
    {
        addOption("100 gm", "100 gm",row_num);
        addOption("200 gm", "200 gm",row_num);
        addOption("500 gm", "500 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);
    }

    if(control_value.value == 'Dhaniya Powder')
    {
        addOption("100 gm", "100 gm",row_num);
        addOption("200 gm", "200 gm",row_num);
        addOption("500 gm", "500 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);
    }

    if(control_value.value == 'Red Chilli Powder')
    {
        addOption("100 gm", "100 gm",row_num);
        addOption("200 gm", "200 gm",row_num);
        addOption("500 gm", "500 gm",row_num);
        addOption("1 Kg", "1 Kg",row_num);
    }
}////////////////// 

function addOption(value, text, rno)
{
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;

    //if(rowCount==undefined)
    //  rowCount=0; 

    document.getElementById('SubCat['+rno+']').options.add(optn);

}
     </script> 
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0066FF;}
.style2 {border:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#0066FF; font-weight:bold;}
.style3 {
    font-size: 14px;
    font-weight: bold;
}
.table{border: 2px solid #CCCCCC;}
.button{background-color:#0099FF; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color:#FFFFFF; font-size:12px; }
.table_cell_new {
    font-size:11px;
    font-family:Verdana, sans-serif, serif, Arial, Helvetica;
    color: #555859;
    font-weight: 300;
    width: 180px;
}
.line {
 color:#CCCCCC; size:inherit; border-bottom:solid;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif;}
.style5 {font-size: 12px;}

-->
     </style> 
 </head>  
<body>
<table width="583" border="0" align="center">
  <tr>
    <td width="596" height="298">
    <form name="drop_list" method="post" action="submitorder.php" enctype="multipart/form-data" >
      <table width="581" border="0" align="center" class="table">
        <tbody>
        <tr>
          <td height="149" valign="top"><table width="476" border="0" align="left">
              <tr>
                <td height="34" colspan="3" class="style1 style3">Submit Order Details</td>
              </tr>
              <tr>
                <td width="138" class="txtLabel style4 style5">Company Name</td>
                <td width="328" colspan="2"><label>
                  <input name="companyname" type="text" class="table_cell_new" id="companyname" maxlength="50" />
                </label></td>
              </tr>
              <tr>
                <td class="txtLabel style4 style5">Address</td>
                <td colspan="2"><input name="address" type="text" class="table_cell_new" id="address" maxlength="50" /></td>
              </tr>
              <tr>
                <td class="txtLabel style4 style5">Contact No.</td>
                <td colspan="2"><input name="contactno" type="text" class="table_cell_new" id="contactno" maxlength="15" /></td>
              </tr>
              <tr>
                <td class="txtLabel style4 style5">Email Add.</td>
                <td colspan="2"><input name="email" type="text" class="table_cell_new" id="email" maxlength="15" /></td>
              </tr>
              <tr>
                <td height="11" colspan="3" valign="top"></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td height="10" valign="top" class="line">&nbsp;</td>
        </tr>
        <tr>
          <td width="571" height="56" valign="top"><table width="570" border="0">
              <tr>
                <td width="52" class="style2">Select </td>
                <td width="51" align="left" class="style2"><div align="left">S. No.</div></td>
                <td width="197" align="left" class="style2"><div align="left">Product Name</div></td>
                <td width="103" align="left" class="style2"><div align="left">Variation</div></td>
                <td width="145" align="left" class="style2"><div align="left">Quantity</div></td>
              </tr>
            </table>
              <table id="dataTable" width="571" border="0">
                <tr>
                  <td width="60">&nbsp;</td>
                  <td width="56" class="style2"> 1 </td>
                  <td width="204" align="left"><div align="left">
                      <select name="Category[0]" id="Category[0]" onChange="SelectSubCat(this);">
                        <option value="0" selected="true">:: Select A Product ::</option>
                        <option value="Jalani Jaljira">Jalani Jaljira</option>
                        <option value="Pav Bhaji Masala">Pav Bhaji Masala</option>
                        <option value="Sambhar Masala">Sambhar Masala</option>
                        <option value="Sabji Masala">Sabji Masala</option>
                        <option value="Kitchen King Masala">Kitchen King Masala</option>
                        <option value="Garam Masala">Garam Masala</option>
                        <option value="Meat Masala">Meat Masala</option>
                        <option value="Chat Masala">Chat Masala</option>
                        <option value="Chicken Masala">Chicken Masala </option>
                        <option value="Ghar Sansar Jaljira">Ghar Sansar Jaljira</option>
                        <option value="Dry Ginger Powder">Dry Ginger Powder</option>
                        <option value="Dry Mango Powder">Dry Mango Powder</option>
                        <option value="Pudina Powder">Pudina Powder</option>
                        <option value="Jeera Powder">Jeera Powder</option>
                        <option value="Black Pepper">Black Pepper</option>
                        <option value="White Pepper Powder">White Pepper Powder</option>
                        <option value="Fennel Powder (Saunf)">Fennel Powder (Saunf) </option>
                        <option value="Kashmiri Mirch">Kashmiri Mirch </option>
                        <option value="Kasuri Methi">Kasuri Methi </option>
                        <option value="Jaljira">Jaljira </option>
                        <option value="Chana Chole Masala">Chana Chole Masala </option>
                        <option value="Super Garam Masala">Super Garam Masala</option>
                        <option value="Haldi Powder">Haldi Powder </option>
                        <option value="Dhaniya Powder">Dhaniya Powder</option>
                        <option value="Red Chilli Powder">Red Chilli Powder</option>
                      </select>
                  </div></td>
                  <td width="109" align="left"><div align="left">
                      <select name="SubCat[0]" id="SubCat[0]">
                      </select>
                  </div></td>
                  <td width="120"><input name="quantity[]" type="text" size="20" maxlength="25" onblur="return check_numeric(this);"/></td>
                </tr>
              </table>
            <br>
              <input type="button" class="button" onClick="addRow('dataTable')" value="Add More" />
              <input type="button" class="button" onClick="deleteRow('dataTable')" value="Delete Row" />
              <input name="Submit" type="submit" class="button" value="Submit Details" />
          </td>
        </tr>
        </tbody>
      </table>
        </form>
    </td>
  </tr>
</table>
</body>  
</html>

【问题讨论】：

  • 您能否正确格式化您的代码，使用代码示例按钮（工具栏中有一个图标，上面有 1 和 0），并且可能只包括相关部分，除非它都是相关的。
  • 尝试格式化以便人类阅读。
  • 询问代码时：catb.org/~esr/faqs/smart-questions.html#code 特别是，请将源转储变成最小的测试用例，这样我们就不必费力地处理不相关的代码：wiki.mozilla.org/QA/Minimal_Test_Cases 另外，请描述您的行为期望和你得到的行为。除了为什么会出错之外，我们不应该弄清楚出了什么问题。包括错误消息（如果有）。
  • 您确定是行创建问题而不是选择元素创建问题吗？我似乎记得 IE 在使用 DOM 方法添加选项时遇到问题。 select.options[select.options.length] = new Option(foo,bar);是 IIRC 的前进方向。

标签： javascript


【解决方案1】：

尝试将这个庞大的函数重构为更小的部分（您可以使用标准函数来添加选项元素），这将意味着更少的复制/粘贴代码。

然后您可以通过这些函数添加简单的调试语句以查看发生了什么。

【讨论】：

    【解决方案2】： 
    e1.setAttribute("onclick","javascript:SelectSubCat(this);");

    我认为这条线可能是原因。看下面（第一行用"onchange"，但是用JS添加的行用"onclick"……）：

    document.getElementById("Category[0]").onchange // the first row
>> function()

    但是，

    document.getElementById("Category[1]").onclick // the second row
>> "SelectSubCat(this);"

    即Internet Explorer 将onclick 设置为字符串！ （顺便说一句，添加侦听器的推荐方法是使用addEventListener（但 IE 忽略了这一点并使用了自己的attachEvent！）。）无论如何，有一种 DOM 0 方法可以在两者中都有效（afaic） IE 和 Fx：element.onevent。使用此方法时不必将this 传递给函数，只需将上一行替换为（this = 被点击的元素，当函数被调用时）：

    e1.onchange = SelectSubCat;

    但是，您必须更改第一行调用SelectSubCat 的方式，并在函数中使用this 而不是control_value。

    最后一件事，类似的一行：

    el.setAttribute("onblur","javascript:check_numeric(this)");

    你必须在这里做同样的事情。

    你可能应该听听所有人shouting at you 你的函数有多糟糕（也许一些数组可能有助于清理代码的某些部分）。和（最后一个“和” :)，这个页面没有 JS 就无法工作，因此被破坏了。

    （有关 JS 事件的更多信息，请参阅Introduction to Events。）

    【讨论】：

      【解决方案3】：

      没有阅读全文 - 您粘贴了太多远代码 - 但我会猜测问题所在。

      IE 有一个众所周知的问题，即它无法使用 DOM 方法动态添加表格单元格。改用innerHTML，这样行得通。

      【讨论】：

      • IE 有一个众所周知的问题，它无法使用 innerHTML 编辑表格的内部。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-30
      • 1970-01-01
      • 2010-11-24
      • 2011-02-18
      • 2011-01-15
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode