Javascript html表中具有多行的特定列的总和_Javascript_Php_Html

Javascript html表中具有多行的特定列的总和

javascript php html

Javascript html表中具有多行的特定列的总和,javascript,php,html,Javascript,Php,Html,我的Java脚本代码 <script> $(function(){ $('#addRow').click(function(){ var html = $('#row_template').html(); $('#dataTable').append(html); $(".tablerow").each(function(index) { $(this).h

我的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函数，但是其中可能有一些错误，首先指出一些错误：

$'row_template'.html：浏览器会自动将tbody添加到表中，因此您的主表中最终会有多个tbody，如果这是所需的输出，当然这本身不会导致任何问题。您误用了ID。每个tr都有多个td，其输入共享同一ID。相反，您应该使用类。计算得到的单元格的innerHTML总量，这些单元格不包含数字，而是一个输入元素。相反，您需要这些输入元素所持有的值。在对这些值进行数学运算之前，您需要将它们转换为数字，否则它将假定它们是字符串，并将它们放在一起。e、 g.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);
});

我没有纠正你所有的错误，您应该查看@Samurai answer以了解更多详细信息，例如“id”的使用和其他事项

正如我在评论中所说，主要问题是使用返回的innerHTML 另一件事，你的theTbl变量不好，你永远不能调用它的长度。要解决这个问题，你必须这样处理：

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

以下是一个可行的解决方案：

那你得到了什么？有错误吗？日志返回的值是什么？当我在Javascript中添加alert语句来显示totam的值时，我得到的值是零。您得到的是单元格的html内容，而不是值。。。innerHTML从TD返回innerHTML代码，因此它返回顺便说一句，为什么有2个循环？您只需要1个循环就可以遍历这些行，因为您只需要其中一个行的单元格值……如何获得可以添加的值？我在JSFIDLE中添加了alert语句，但它说明了为什么要添加alert？只需添加1行，设置比率，然后设置数量，您将看到$total标签将发生更改。添加其他行，也可以这样做。这不是你想要的吗？