Question

我正在建立一个表单，通过网页将一些数据插入到数据库中。一切都很好，但我无法在表单表的输入文本元素中显示乘法。我已经检查了很多教程来做这个，代码应该没问题，但我不能有这个小结果。这是我的HTML代码。 php部分没问题，所以我不会发布它。

<html>
    <head>
        <meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <link href="./css/style2.css" rel="stylesheet" type="text/css">
        <?php  include("form.php") ?>
        <script type="text/javascript">
        $("#btnExport").click(function(e) {
            window.open('data:application/vnd.ms-excel,' + $('#dataTable').html());
            e.preventDefault();
        });
        </script>


        <script type=text/javascript>
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);
            var cell2 = row.insertCell(1);
            cell2.innerHTML = "<input type='text' name='TipoLocale[]'>";
            var cell3 = row.insertCell(2);
            cell3.innerHTML = "<input type='text'  name='NomeLocale[]' />";
            var cell4 = row.insertCell(3);
            cell3.innerHTML = "<input type='text'  name='Numero Locale[]' />";
            var cell5 = row.insertCell(4);
            cell4.innerHTML =  "<input type='text'  name='TipoCarico[]' />";
            var cell6 = row.insertCell(5);
            cell5.innerHTML =  "<input type='text'  name='N°[]' />";
            var cell7 = row.insertCell(6);
            cell6.innerHTML =  "<input type='text'  name='Potenza[]' />";
            var cell8 = row.insertCell(7);
            cell7.innerHTML =  "<input type='text'  name='PotenzaTotale[]' />";
            var cell9 = row.insertCell(8);
            cell8.innerHTML =  "<input type='text'  name='Note[]' />";
        }

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

    $('input').change(function(){
            var linetotals = 0;
            $('[name^="Potenza[]"').each(function(){
            n = $(this).parents('tr').find('input').eq(4).val();
                potenza = $(this).parents('tr').find('input').eq(5).val();      
                $(this).val(n*potenza/1000);
                linetotals += n*potenza/1000;
            });
            $('[name=PotenzaTotale[]]').val(linetotals);
        });
        </script>
    </head>
    <body>
        <input type="button" id="btnExport" value=" Export Table data into Excel " />       
        <INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />
        <INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
        <form action="form.php" method="post" name="f">  
            <TABLE width="425" border="1">
                <thead>
                    <tr>
                        <th width="98"></th>
                        <th width="94">TipoLocale</th>
                        <th width="121">NomeLocale</th>
                        <th width="54">NumeroLocale</th>
                        <th width="54">TipoCarico</th>
                        <th width="54">N°</th>
                        <th width="54">Potenza</th>
                        <th width="54">PotenzaTotale</th>
                        <th width="54">Note</th>
                    </tr>
                </thead>
                <tbody id="dataTable">
                </tbody>
    </TABLE>
    <INPUT type="submit" value="Submit" name="submit" target="_new"/>
        </form>
    </body>
</html>

我为此

建立了a fiddle

感谢您的任何建议

编辑：已解决。我在操作所需的最后输入单元格中添加了onchange（）。

cell7.innerHTML =  "<input type='text'  name='Potenza[]' onchange='myfunction()';/>";

比添加功能：

function myfunction(){
    var numero =  document.getElementsByName('N°[]');
    var potenza = document.getElementsByName('Potenza[]');
    var pt = [];
    for (var i = 0; i < numero.length; i++)
            {
                pt[i] = (parseInt(potenza[i].value) * parseInt(numero[i].value))/1000;
                //alert (pt[i]);
                document.getElementsByName('PotenzaTotale[]')[i].value = pt[i];
            }   
                        };

完美运作！（可能不那么干净）

更新fiddle

动态表格Html中的Javascript算术运算

0 个答案: