jQuery 绑定 table 行输入

Question

我不是很有经验的 javascript 开发人员，我不知道如何在每个 table 行中绑定输入。

我的 table 有三列 - start、progress 和 remain .开始列包含时间估计的静态值，其他两列包含进度和剩余时间的输入。我需要绑定这些输入，以便在另一个输入更改时重新计算进度或剩余输入，根据此表达式：start = progress + remain.

这是我到目前为止的进展..

jsfiddle

html:

<table class="stats">
    <thead>
        <td>estimation</td>
        <td>progress</td>
        <td>remain</td>
    </thead>
    <tbody>
        <tr>
            <td class="estimation">50</td>
            <td class="progress"><input type="number" value="20"/></td>
            <td class="remain"><input type="number" value="30"/></td>
        </tr>
        <tr>
            <td class="estimation">100</td>
            <td class="progress"><input type="number" value="10"/></td>
            <td class="remain"><input type="number" value="90"/></td>
        </tr>
            <tr>
            <td class="estimation">70</td>
            <td class="progress"><input type="number" value="20"/></td>
            <td class="remain"><input type="number" value="50"/></td>
        </tr>
    </tbody>
</table>

javascript:

//array of rowClasses
var rows = [];

var rowClass = function(row){
    this.$row = $(row);
    this.$estimation = this.$row.find('.estimation');
    this.$progress = this.$row.find('.progress');
    this.$remain = this.$row.find('.remain');
};

//jquery collecion of table rows
var $rows = $("table.stats>tbody>tr");

//populate rows array with rowClasses
$rows.each(function(index){
    rows[rows.length] = new rowClass($rows[index]);
});

我不知道包含 jQuery .change() 函数，所以它引用了相关的行值。

Answer 1

为输入字段添加最小值和最大值，因为值应保持在范围内。

<tr>
    <td class="estimation">50</td>
    <td class="progress">
        <input type="number" value="20" min="0" max="50"/>
    </td>
    <td class="remain">
        <input type="number" value="30" min="0" max="50"/>
    </td>
</tr>

然后在您的 javascript 下方添加以下脚本，这将执行计算：

$("td.progress input, td.remain input").bind('keyup mouseup', function() {

    var tdEst = $(this).parent().parent().children()[0];

    if ($(this).parent().prop('class') == "progress") {
        var tdRem = $(this).parent().next('td.remain');
        var remValue = parseInt($(tdEst).html()) - parseInt($(this).val());
        $(tdRem).find('input').val(remValue);
    } else {
        var tdProg = $(this).parent().prev('td.progress');
        var remValue = parseInt($(tdEst).html()) - parseInt($(this).val());
        $(tdProg).find('input').val(remValue);
    }
});

DEMO

jQuery 绑定 table 行输入

jQuery bind table row inputs

jquery

bind

rows