Question

我想通过更改单元格内的输入值并使用jquery onkeyup事件在表中执行数学运算。

<table id="GVHabvar">
    <tbody>
        <tr>
            <td>
                <input id="cantidad" name="cantidad" type="text" class = "calculo">
            </td>
            <td>
                <input id="precio" name="precio" type="text" class = "calculo">
            </td>
            <td>
                <input id="valor" name="valor" type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input id="cantidad" name="cantidad" type="text" class = "calculo">
            </td>
            <td>
                <input id="precio" name="precio" type="text" class = "calculo">
            </td>
            <td>
                <input id="valor" name="valor" type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input id="cantidad" name="cantidad" type="text" class = "calculo">
            </td>
            <td>
                <input id="precio" name="precio" type="text" class = "calculo">
            </td>
            <td>
                <input id="valor" name="valor" type="text">
            </td>
        </tr>
    </tbody>
</table>

这是我的尝试，但它不适用于数据表（例如，使用分页）

    $(document).ready(function () {
        var filas = $("#GVHabvar tbody tr");
        filas.each(function (index) {
            var fila = $(this);
            fila.find('.calculo').on('keyup', function () {
                var cantidad = ($.isNumeric(fila.find("#cantidad").val())) ? fila.find("#cantidad").val() : 0;
                var precio = ($.isNumeric(fila.find("#precio").val())) ? fila.find("#precio").val() : 0;
                var valor = parseInt(cantidad, 10) * parseInt(precio, 10);
                fila.find('#valor').val(valor);
            });
        });
    });

Answer 1

执行此操作的一种方法是使用数据表rowCallback。绘制每一行后会触发此事件，并可用于绑定您的keyup事件。正如您所发现的那样，您执行此操作的方式仅影响可见表数据。

React.Children.map

这是一个有效的jsfiddle

DataTables和jQuery在表中执行计算

1 个答案: