Question

我有一个表，我可以在点击按钮后插入新行。我想使用keyup函数在td值之间进行计算。我的问题是keyup函数适用于第一行，在我插入一个新行后，该函数影响新行和前一行。如何创建函数以便为添加的每个新行单独使用它？

提前致谢。

    <button type="button" class="add-row" >Add</button>
<table>
<tr>
<td>Amount</td>
<td>Price</td>
<td>Result</td>
</td>
</tr>
<tr>
<td class='amount' contenteditable='true'></td>
<td class='price' contenteditable='true' onkeyup='calculfac()'></td>
<td class='result'></td>
</tr>
</table>

<script>
//Add new row on click
$(".add-row").click(function(){
var markup = "<tr><td class='amount' contenteditable='true'></td><td class='price' contenteditable='true' onkeyup='calculfac()'></td><td class='result'></td></tr>";
$("table tbody").append(markup);
});

//Calcul

function calculfac() {
var amount= $('.amount').text();
var price= $('.price').text();
var mult = amount * price;
var result = Math.round(mult).toFixed(2);
$('.result').text(result);
}

Answer 1

你的片段几乎就在那里。您可以在使用创建jQuery选择器时指定父级：$('.selector', parent)其中parent可以是jQuery对象或其他选择器本身。请参阅下面的代码：

function calculfac() {

  const parent = $(this).parent('tr');
  const amount = $('.amount', parent).text();
  const price = $('.price', parent).text();
  const result = Math.round(amount * price).toFixed(2);
  $('.result', parent).text(result);

}

此外，我将从您的元素中删除onkeyup="calculfac()"并使用jQuery选择器并将您的函数作为处理程序传递。这允许我们在每个可编辑区域上触发事件而不仅仅是价格。如果我们不这样做，用户可以设置价格并稍后更新金额，但总数在更改之前保持不变。请参阅下面的代码：

$('tbody').on('keyup', '[contenteditable="true"]', calculfac);

上述代码段的一个主要区别是我们正在使用.on。由于新的tr是由click处理程序生成的，tr [contenteditable="true"]的传统选择器无法从您的处理程序中作为新的tr工作运行选择器时DOM中尚不存在。 .on允许您过滤更多元素。因此，我们选择了tbody和keyup匹配的contenteditable=true元素，我们将该事件传递给calculfac函数。

以下是完整的Fiddle

Answer 2

那是因为你正在上课。您的代码无法识别应更改的类值。它将改变所有类名的所有值。

您可以使用.each()功能修复它。您想要更改几乎每个<td>代码中<tr>代码的内容。不是每个<tr>标记都可以使用一个类来告诉我们<tr>我们的意思。所以，让我们走吧：

第1步 - 在包含您要更改的子项的标记处添加“.tr”类。

<tr class="tr">

第2步 - 将'.tr'类添加到'添加新行' - 函数

//Add new row on click
$(".add-row").click(function(){

    var markup = "<tr class='tr'><td class='amount' contenteditable='true'></td><td class='price' contenteditable='true' onkeyup='calculfac()'></td><td class='result'></td></tr>"; //Add '.tr' class

    $("table tbody").append(markup);

});

第3步 - 告诉你要在每个.tr类中获取/更改它们的类。

function calculfac() {

  $('.tr').each(function(){ //Each .tr class
        var amount= $('.amount', this).text(); //The .amount class of 'this' .tr class
        var price= $('.price', this).text(); //The .price class of 'this' .tr class
        var mult = amount * price;
        var result = Math.round(mult).toFixed(2);
        $('.result', this).text(result); //The .results class of 'this' .tr class

  });

}

示例

查看JSFiddle：https://jsfiddle.net/z9qsyzr8/15/

在多个表行

2 个答案: