Question

我的Java脚本代码

<script>
    $(function(){
        $('#addRow').click(function(){
            var html = $('#row_template').html();
            $('#dataTable').append(html);
            $(".tablerow").each(function(index) {
                $(this).html(index + 1);
            });
        });
        $('#deleteRow').click(function(){
            $('#dataTable .mychkbox:checked').parents('tr').remove();
        });
        $('#dataTable').on('change','.select-desc',function(){
            var cur_val = $(this).val();
            $(this).parents('tr').find('input[name="rate[]"]').val(cur_val);
        });
        $('#dataTable').on('keyup','input[name="qty[]"]', function(){
            var qty = +$(this).val();
            var unit = +$(this).parents('tr').find('input[name="rate[]"]').val();
            $(this).parents('tr').find('input[name="amt[]"]').val(qty*unit);
            var totamt = 0 ;
            var theTbl = document.getElementById('dataTable');

            for(var i=0;i<theTbl.length;i++)
            {
                for(var j=0;j<theTbl.rows[i].cells.length;j++)
                {
                    totamt = totamt + theTbl.rows[i].cells[4].InnerHTML;
                }
            }
        });
    });
</script>

我的HTML代码

<!DOCTYPE html>
<html>
    <div class="left">
        <h2><span class="orange">Work Order Items</span></h2>
        <table>
            <tr>
                <td><input type="button" value="Add Row" id="addRow" /></td>
                <td><input type="button" value="Remove Row" id="deleteRow" /></td>
            </tr>
        </table>
    </div>
    <table id="dataTable" class="form" border="0" width='100%'>
        <tr>
            <td></td>
            <td>No</td>
            <td>Item Description</label></td>
            <td>Qty</td>
            <td>Rate</td>
            <td>Amount</td>
            <td>Cert No</td>
            <td>C Date</td>
        </tr>
    </table>
    <table id="row_template" style="display:none">
        <tr>
            <td><input type="checkbox" name="chk[]" class="mychkbox" /></td>
            <td class="tablerow"></td>
            <td>
               <?php
                    $sql = "SELECT itrate,CONCAT(itname,'|',itcode) as mname FROM ITMAST ";
                    $result = mysql_query($sql) or die(mysql_error());
                    echo "<select name='itname[]' id='itname' class='select-desc' >";
                    echo "<option value=''>-- Select Item --</option>";
                        while ($row = mysql_fetch_array($result)) 
                        {
                            echo "<option value = '{$row['itrate']}'";
                                if ($pitcode == $row['itrate'])
                                    echo "selected = 'selected'";
                            echo ">{$row['mname']}</option>";
                        }
                        echo "</select>";
                ?>
            </td>
            <td><input type="text" name="qty[]" id="qty" size="6" class='rightJustified'></td>
            <td><input type="text" name="rate[]" id="rate" size="8" class='rightJustified' readonly></td>
            <td><input type="text" name="amt[]" id="amt" size="9" class='rightJustified' readonly></td>
            <td><input type="text" maxlength="10" size="8" name="txtcertno[]"></td>
            <td><input type="date" maxlength="10" size="10" name="txtcdate[]"></td>
        </tr>
    </table>
</html>

我想在一行的每个条目之后尝试总量量列，即amt []，但是我没有正确地得到它，我已经写了相同的Javascript函数但是有些东西可能是错误的

Answer 1

首先指出一些错误：

$('#row_template').html()：浏览器自动将tbody添加到表中，因此您的主表中最终会有多个tbody，这当然不会导致任何问题，如果那是所需的输出。
您误导ID。每个tr都有多个td与input共享相同的ID。相反，您应该使用class。
要计算您获取不包含数字但innerHTML元素的单元格input的总金额。相反，您需要这些input元素所持有的值。
您需要在对它们进行数学运算之前将值转换为数字，否则它会假定它们是字符串并且只是将它们放在一起。（例如0 + 1 + 2 = 012而不是3）。您应该使用后者更适合此情况的parseInt或parseFlout。

对您的代码进行一些修改：

 $('#addRow').click(function () {
     var html = $('#row_template tbody').html();
     $('#dataTable tbody').append(html);

并且 - 因为您正在使用jQuery - 我完全将计算更改为jQuery版本：

//gt(0) cause the first row contains headers
//eq(5) cause we want the 6th cell (Amount)
var totamt = 0;
$('#dataTable tr:gt(0)').each(function() {
    var newAmt = $(this).find('td:eq(5) input[type=text]').val();
    totamt += parseFloat(newAmt);
});

Answer 2

我没有纠正你的所有错误，您应该查看@Samurai答案以获取更多详细信息（例如使用＆＃39; id＆＃39;以及其他内容）

正如我在评论中所说，主要问题是使用了返回＆＃34;

另外一件事，你的theTbl var不好，你永远不能在它上面调用.length。要解决这个问题，你必须这样处理它：

var totamt = 0 ;
var theTbl = $('#dataTable');
//You are using jquery, so use jquery selectors...
var trs = theTbl.find("input[name='amt[]']");
//find there the AMT[] INPUTS, not the rows...
console.log("how many amt inputs? : "+trs.length);
for(var i=0;i<trs.length;i++)
{
    //fetch the inputs, and make your calculations here
    console.log("amount from row "+i+" = "+trs[i].value);
    //do not forget, as Samurai said, to convert html to numeric...
    $("#total").html(totamt+=parseFloat(trs[i].value));         
}

这是一个有效的解决方案：

http://jsfiddle.net/nxm0ye54/20/

来自html表的具有多行的特定列的总和

2 个答案: