动态添加行javascript函数适用于Firefox但不适用于IE

时间:2009-05-28 11:10:49

标签: javascript

<!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>

3 个答案:

答案 0 :(得分:0)

尝试将大量函数重构为较小的部分(您可以使用标准函数添加选项元素),这意味着更少的复制/粘贴代码。

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

答案 1 :(得分:0)

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方式可以正常工作(在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。)

答案 2 :(得分:-1)

没有读完整件事 - 你粘贴了太多的代码 - 但我会猜测这个问题。

IE有一个众所周知的问题,即它无法使用DOM方法动态添加表格单元格。使用innerHTML代替,这有效。