jQuery求和表td，只允许总计100

我想对所有表行的类总计的表列求和。并在最后一行显示总计。我希望仅允许总计=100提交表单，否则将显示错误消息

我发现下面的代码，并试图更改它，但它不起作用：

代码

<table>
  <tr>
    <td>Size 1</td>
    <td><input type="text" class="productA"></td>
  </tr>
  <tr>
    <td>Size 2</td>
    <td><input type="text" class="productA"></td>
  </tr>
  <tr>
    <td>Size 3</td>
    <td><input type="text" class="productA"></td>
  </tr>
  <tr>
    <td>TOTAL</td>
    <td></td>
  </tr>
</table>

1号
2号
3号
全部的

请建议

这样试试：

$(document).on("input", "input:text", function () {
    var strClass = $(this).prop("class");
    var intTotal = 0;
    $.each($("input:text." + strClass), function () {
        var intInputValue = parseInt($(this).val());
        if (!isNaN(intInputValue))
        {
            intTotal = intTotal + intInputValue;
        }
    });
    $(this).closest("tr").siblings("tr:last").find("td:last").text(intTotal);
});

您还有一个类型错误：

$（tdis）

应该是

$（this）

$（文档）.on（“输入”，“输入：文本”，函数（）{
var strClass=$（this.prop（“类”）；
var intTotal=0；
$.each（$（“输入：text.+strClass”），函数（）{
var intInputValue=parseInt（$（this.val（））；
如果（！isNaN（intInputValue））
{
intTotal=intTotal+intInputValue；
}
});
$（this）.closest（“tr”）.sillides（“tr:last”）.find（“td:last”）.text（intTotal）；
});

1号
2号
3号
全部的
像这样尝试：

$(document).on("input", "input:text", function () {
    var strClass = $(this).prop("class");
    var intTotal = 0;
    $.each($("input:text." + strClass), function () {
        var intInputValue = parseInt($(this).val());
        if (!isNaN(intInputValue))
        {
            intTotal = intTotal + intInputValue;
        }
    });
    $(this).closest("tr").siblings("tr:last").find("td:last").text(intTotal);
});

您还有一个类型错误：
$（tdis）
应该是
$（this）


$（文档）.on（“输入”，“输入：文本”，函数（）{
var strClass=$（this.prop（“类”）；
var intTotal=0；
$.each（$（“输入：text.+strClass”），函数（）{
var intInputValue=parseInt（$（this.val（））；
如果（！isNaN（intInputValue））
{
intTotal=intTotal+intInputValue；
}
});
$（this）.closest（“tr”）.sillides（“tr:last”）.find（“td:last”）.text（intTotal）；
});

1号
2号
3号
全部的


处理输入事件
在每个
total
类输入文本框上循环，并对值求和

代码

HTML


1号
2号
3号
全部的
总数不得大于100


处理输入事件
在每个
total
类输入文本框上循环，并对值求和

代码

HTML


1号
2号
3号
全部的
总数不得大于100

$（文档）.on（“更改”，“输入：文本”，函数（）{
var strClass=$（this.prop（“类”）；
var intTotal=0；
$.each（$（“输入：text.+strClass”），函数（）{
var intInputValue=parseInt（$（this.val（））；
如果（！isNaN（intInputValue））
{
intTotal=intTotal+intInputValue；
}
});
$（'.sum'）.text（intTotal）；
});

1号
2号
3号
全部的

$（文档）.on（“更改”，“输入：文本”，函数（）{
var strClass=$（this.prop（“类”）；
var intTotal=0；
$.each（$（“输入：text.+strClass”），函数（）{
var intInputValue=parseInt（$（this.val（））；
如果（！isNaN（intInputValue））
{
intTotal=intTotal+intInputValue；
}
});
$（'.sum'）.text（intTotal）；
});

1号
2号
3号
全部的
这是最简单的方法：


$（document）.on（“keyup-change”，“input.productA”，函数（）{
var合计=0；
$（“input.productA”）。每个（函数（）{
var value=parseInt（$（this）.val（），10）；
如果（！isNaN（值））{
总计=总计+价值
} 
如果（总数<100）{
$（“tr>td:contains（'TOTAL'））.next（）.html（TOTAL）.removeClass（“错误”）
}
else$（“tr>td:contains（'TOTAL'））.next（）.html（“达到限制100”）.addClass（“错误”）
})
});
。错误{
颜色：红色；
}

1号
2号
3号
全部的
这是最简单的方法：


$（document）.on（“keyup-change”，“input.productA”，函数（）{
var合计=0；
$（“input.productA”）。每个（函数（）{
var value=parseInt（$（this）.val（），10）；
如果（！isNaN（值））{
总计=总计+价值
} 
如果（总数<100）{
$（“tr>td:contains（'TOTAL'））.next（）.html（TOTAL）.removeClass（“错误”）
}
else$（“tr>td:contains（'TOTAL'））.next（）.html（“达到限制100”）.addClass（“错误”）
})
});
。错误{
颜色：红色；
}

1号
2号
3号
全部的
calculateSum
函数计算总和，并确保仅当总数为100时按钮才启用


$（文档）.on（“输入”，“输入：文本”，函数（））{
计算um（）；
});
函数calculateSum（）{
var合计=0；
$（'.productA'）。每个（函数（）{
如果（！isNaN（parseInt（$（this）.val（）））
total+=parseInt（$（this.val（））；
});
$（‘表tr:last td:eq（1）’）。正文（总计）；
$（“.submitButton”）.prop（'disabled'，false）；
如果（总数=100）{
$（“.submitButton”）.prop（'disabled'，true）；
}
}

1号
2号
3号
全部的
Submit
calculateSum
函数计算总和，并将确保仅在total=100时启用该按钮


$（文档）.on（“输入”，“输入：文本”，函数（））{
计算um（）；
});
函数calculateSum（）{
var合计=0；
$（'.productA'）。每个（函数（）{
如果（！isNaN（parseInt（$（this）.val（）））
total+=parseInt（$（this.val（））；
});
$（‘表tr:last td:eq（1）’）。正文（总计）；
$（“.submitButton”）.prop（'di
$(".warning").hide();

$(".total").on("input", function () {

    var intTotal = 0;
    $(".total").each(function(index, el) {
        var intInputValue = parseInt( $(el).val() );
      if (!isNaN(intInputValue)) {
        intTotal = intTotal + intInputValue;
      }

    });

    // $.each($("input:text." + strClass), function () {
    //     var intInputValue = parseInt($(tdis).val());
    //     if (!isNaN(intInputValue))
    //     {
    //         intTotal = intTotal + intInputValue;
    //     }
    // });

    $(".my-sum").text(intTotal);
    if (intTotal > 100) {
        $(".warning").show();
    }

});

<table>
  <tr>
    <td>Size 1</td>
    <td><input type="text" class="total"></td>
  </tr>
  <tr>
    <td>Size 2</td>
    <td><input type="text" class="total"></td>
  </tr>
  <tr>
    <td>Size 3</td>
    <td><input type="text" class="total"></td>
  </tr>
  <tr>
    <td>TOTAL</td>
    <td><span class="my-sum"></span></td>
  </tr>

</table>
<div class="warning">Total must not be bigger than 100</div>