javascript - HTML 表 - 迭代行并对字段求和

标签 javascript jquery iteration html-table

我有下表:

    <table style="width:100%" id="testTable">
    <tr>
        <th>length per</th>
        <th>width per</th> 
        <th>length</th>
        <th>width</th>
        <th>total</th>
    </tr>
    <tr align='right'>
        <td>
            <input type="text" name="length-per-input">
        </td>
        <td>
            <input type="text" name="width-per-input">
        </td> 
        <td>
            <input type="text" name="length-total-input">
        </td>
        <td>
            <input type="text" name="width-total-input">
        </td>
        <td>
            <input type="text" name="total-output" disabled="disabled">
        </td>
    </tr>
    <tr align='right'>
        <td>
            <input type="text" name="length-per-input">
        </td>
        <td>
            <input type="text" name="width-per-input">
        </td> 
        <td>
            <input type="text" name="length-total-input">
        </td>
        <td>
            <input type="text" name="width-total-input">
        </td>
        <td>
            <input type="text" name="total-output" disabled="disabled">
        </td>
    </tr>
</table>

<input type=button value='+' onclick="addRow()" />
<input type=button value='Calculate' onclick="Calculate()" />

我还有 javascript,它可以添加值并将其总计:

<script>
    function Calculate() {
        var lengthPerInput = $("input[name='length-per-input']").val();
        var widthPerInput = $("input[name='width-per-input']").val();
        var lengthTotal = $("input[name='length-total-input']").val();
        var widthTotal = $("input[name='width-total-input']").val();
        var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
        $("input[name='total-output']").val(total);
    }
</script>

这里的目标是让它迭代两行,然后分别添加每一行。 我知道如何使用以下方法获取每一行:

$('#testTable tr').each(function(){
    console.log(this);
    $(this).find('length-per-input').each(function(){
        console.log(this);
    })
})

但是使用该行(通过“this”访问)我不知道如何获取正确的单元格,获取它们的值,然后对该行执行总计计算。

请问对此有何建议?谢谢!

最佳答案

    function Calculate(tr_row) {
        var lengthPerInput = tr_row.find("input[name='length-per-input']").val();
        var widthPerInput = tr_row.find("input[name='width-per-input']").val();
        var lengthTotal = tr_row.find("input[name='length-total-input']").val();
        var widthTotal = tr_row.find("input[name='width-total-input']").val();
        var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
        tr_row.find("input[name='total-output']").val(total);
    }

对于每一行,您调用函数来对值求和 向函数传递该行,然后它可以收集该行上的值

$('#testTable tr').each(function(){
    Calculate($(this))   
})

关于javascript - HTML 表 - 迭代行并对字段求和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31203745/

相关文章:

javascript - 在 Chrome 中打开窗口时打开 pdf 不起作用

javascript - 我可以在 Android 开发中使用 javax.script 吗?如果可以,如何使用?

javascript - 如何保持一个 Accordion 选项卡始终打开

javascript - PHP JS 链接动态列表

Python: "dynamic"列表的所有可能组合

python - Python 中与 finditer() 的重叠匹配

间隔执行后的 JavaScript 回调

javascript - 使用 Tweenjs 动画颜色

javascript - jQuery hide() 和 show() 在函数后面反转时不会立即运行

file - 继续从文件中的当前行进行迭代