javascript - 添加新行时出现 javascript / HTML 页面格式问题

Question

我正在制作一个动态表格来计算一些数据，但我被卡住了......

我有两个问题：

1. 在 firefox/chrome 中添加新行时，它会破坏 HTML PAGE 布局
2. 在 firefox/chrome 中时，它不会从下拉列表中提取值

请帮忙解决

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