Question

我正在尝试制作具有3-4个输入的表格需要多个并获得每行的总数。我从Stackoverflow获得了这个代码，就使用div而言它工作得很好。但当我把它改成桌子和桌子时它没有用。

    <table>
 <h1>table - not working</h1>
                            <tr class="1">
                                <td><input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="100" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </tr>
<br /><br /><br />
                            <tr class="2">
                                <td> <input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="200" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </tr>



<td><span class="sub_total"></span> </td> 
</table>



<div>
 <h1>divs - works fine</h1>
                            <div class="1">
                                <td><input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="100" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </div>
<br /><br /><br />
                            <div class="2">
                                <td> <input name="pro_qty" type="number" />  </td>                                    
                                <td> <input name="pro_amt" type="number" value="200" /> </td>
                                <td> <span class="total_value"></span> </td>
                            </div>



        <td><span class="sub_total"></span> </td> 
</div>




<script>

//any time the amount changes
$(document).ready(function() {
    $("input[name=pro_amt],input[name=pro_qty]").change(function(e) {
        var total = 0;
        var $row = $(this).parent();
        var pro_qty = $row.find("input[name=pro_qty]").val();
        var pro_amt = $row.find("input[name=pro_amt]").val();
        total = parseFloat(pro_qty * pro_amt);
        //update the row total
        $row.find(".total_value").text(total);
        console.log(total);

        var sub_total = 0;

        $(".total_value").each(function() {
            //Get the value
            var am= $(this).text();
            console.log(am);
            //if it"s a number add it to the total
            if (IsNumeric(am)) {
                sub_total += parseFloat(am, 10);
            }
        });
        $(".sub_total").text(sub_total);
    });
});


function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}

</script>

jsFiddle

请指教。感谢

Answer 1

您的HTML版本都是错误的。

其次，当转到表格版本时，您再添加一个DOM级别以进入实际行。

快速修复您的代码：https://jsfiddle.net/mt65h25b/2/

var $row = $(this).parent().parent();

详细了解HTML table structure和永远不要在表格之外使用td！

可悲的是，您的浏览器会更正您的大多数代码...要真正了解如何编码，请使用DOCTYPE XHTML 1.1并尝试w3c HTML validator。

jquery表格计算＆amp;共计

1 个答案: