有使用JavaScript/HTML網頁格式問題增加新的行

Question

我想提出的是calculaes一些數據的動態表單，我被卡住的時候......

我有2個問題：

1. 它螺絲若新行中的Firefox/Chrome是添加HTML頁面佈局
2. 它不會從下拉菜單中提取值時，在Firefox /鉻

請幫忙解決

 <table class="center font-1 top-3" width="100%"> 
    <tr> 
     <td bgcolor="#808080" align="center"><font color="#FFFFFF"> 
      <b>DEVICE</b></font></td> 
     <td bgcolor="#808080" align="center"><font color="#FFFFFF"> 
      <b>SERVICE</b></font></td> 
     <td bgcolor="#808080" align="center"> 
      <p align="center"><font color="#FFFFFF"><b>QUANTITY</b></font></p> 
     </td> 
     <td bgcolor="#808080" align="center"><font color="#FFFFFF"> 
      <b>PRICE</b></font></td> 
    </tr> 
    <?php 
    for ($i = 1; $i < 21; $i++) { 
     $rowStyle ='';// = ($i == 1) ? "" : "style=\"display:none\""; 
     ?> 
     <tr id="tableRow<?php echo $i; ?>" <?php echo $rowStyle; ?> > 
      <td align="center"> 
       <select size="1" id="Devicerow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)"> 
        <option selected>External</option> 
        <option>Internal</option> 
        <option>Personal</option> 
       </select> </td> 
      <td align="center"> 
       <select size="1" id="Planrow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)"> 
        <option selected>0 ($35.95)</option> 
        <option>1 ($29.95)</option> 
        <option>2 ($19.95)</option> 
        <option>3 ($17.95)</option> 
        <option>4 ($15.95)</option> 
        <option>5 ($12.95)</option> 
        <option>6 ($7.95)</option> 
       </select></td> 
      <td align="center"> 
       <select size="1" id="Qtyrow<?php echo $i; ?>" onchange="JavaScript: calculateRow(<?php echo $i; ?>)"> 
        <option selected>0</option> 
        <?php 
        for ($c = 1; $c < 20; $c++) { 
         echo '<option>' . $c . '</option>'; 
        } 
        ?> 

       </select></td> 
      <td align="center"> 
       <div id="Totalrow<?php echo $i; ?>"> 
        $0</div> 
      </td> 
     </tr> 
     <?php 
    } 
    ?> 
     </table> 

    <table class="center font-1 top-3" width="100%"> 
    <tr> 
     <td colspan="4"> 
      <p align="right"><a onClick="JavaScript: addRow()"><img border="0" src="images/add_row_button.png"></a></p> 
     </td> 
    </tr>        
    <tr> 
     <td colspan="3" bgcolor="#F2F2F2"><b>One Time Devices Price</b></td> 
     <td align="center" bgcolor="#F2F2F2"> 
      <div id="totalDevicePrice"> 
       $0</div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3"><b>Monthly Service Cost</b></td> 
     <td align="center"> 
      <div id="totalServiceCost"> 
       $0</div> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3" bgcolor="#F2F2F2"><b>Grad Total</b></td> 
     <td align="center" bgcolor="#F2F2F2"> 
      <div id="grandTotal"> 
       $0</div> 
     </td> 
    </tr> 
    </table> 


    <script> 
    var rows=2; //start with 2 since 1 is not hidden 

    function addRow(){          
     document.getElementById("tableRow"+rows).style.display="block"; 
     rows=rows+1;           
    } 

    //price and service cost estimator 
    function getDataForDropdown(pref, num){        
     colName = (pref+''+num); 
     var columnName = document.getElementsByName(colName)[0].value; 
     if (columnName == null || columnName == '') 
     { 
      columnName = document.getElementById(colName).value; 
     } 

     if (columnName == null || columnName == '') 
     { 
      var select = document.getElementById(colName); 
      columnName= select.options[select.selectedIndex].value; 
      if (columnName == null || columnName == '') 
      { 
       columnName= select.options[select.selectedIndex].text; 
      } 
     } 
     return columnName; 
    } 

    var all_markers = {}; //hash map to hold markers 
    all_markers['External']=250; 
    all_markers['Internal']=295; 
    all_markers['Personal']=200; 

    var totalRows=20; //should be the same amount of rows as in the the php loop 



    function calculateRow(row){ 
     var totalDevPrice=0; 
     var totalServicePrice=0; 

     for (i=1; i<totalRows;i++){ 
      qty= getDataForDropdown('Qtyrow', i); 
      plan= getDataForDropdown('Planrow', i).split('$')[1].split(')')[0]; 
      device = getDataForDropdown('Devicerow', i); 
      devprice = all_markers[device]; 

      totalDevPrice+=(qty * devprice); 
      totalServicePrice+=(qty * plan); 
      document.getElementById("Totalrow"+i).innerHTML= '$'+((qty*plan)+(qty*devprice)); 
     } 

     document.getElementById("totalDevicePrice").innerHTML= '$'+totalDevPrice; 
     document.getElementById("totalServiceCost").innerHTML= '$'+(totalServicePrice); 
     document.getElementById("grandTotal").innerHTML= '$'+(totalDevPrice+totalServicePrice); 

    } 
</script> 

Answer 1

問題已解決。

不知何故「阻止」沒有做正確的工作。

前：

function addRow(){          
     document.getElementById("tableRow"+rows).style.display="block"; 
     rows=rows+1;           
    } 

工作：

function addRow(){          
     document.getElementById("tableRow"+rows).style.display=''; 
     rows=rows+1;           
    }