Question

我在使用Javascript编写的2个脚本时遇到了一些问题。这两个脚本都是在堆栈溢出时找到的，并且它们都完美地期望一个函数。

第一个脚本在我的表中添加一行，每次按下按钮时都会添加行和单元格。这些单元格基本上包含要提交到表单

的输入

第二个脚本在输入，价格，数量，折扣，总数......之间执行计算。

我的表的第一行已经输入了ustml html，如果需要第二行而不是按下按钮，则第二行脚本在第一行上完美运行，但是一旦创建了新行，脚本（计算脚本）不起作用。它确实在第一行工作，但从不在其他行上工作。

这不是冲突，只是计算脚本不适用于我的新行。这是脚本和我的表的代码。

使用单元格创建行的脚本

var index = 1;

function myCreateFunction() {

var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type='text' id='des" + index + "' name='des' placeholder='' class='form-control input-sm' value=''/>";
cell2.innerHTML = "<input type='text' id='qu" + index + "' name='qu' placeholder='' class='form-control input-sm qu' value=''/>";
cell3.innerHTML = "<input type='text' id='pu" + index + "' name='pu' placeholder='' class='form-control input-sm pu' value=''/>";
cell4.innerHTML = "<input type='text' id='rl" + index + "' name='rl' placeholder='' class='form-control input-sm rl' value=''/>";
cell5.innerHTML = "<input type='text' id='tlht" + index + "' name='tlht' placeholder='' class='form-control input-sm total' value=''/>";
index++;
return false;
}

function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);

return false
}

执行计算的脚本

$(".pu, .qu, .rl, #vat, #acompte").change(function() {
var row = $(this).closest("tr");
var price = parseFloat($(".pu", row).val());
var quantity = parseInt($(".qu", row).val(), 10);
var discount = parseFloat($(".rl", row).val());
if (price && quantity) {
if (isNaN(discount)) {
    discount = 0;
}
var total = price * quantity * (1 - discount/100);
$(".total", row).val(total.toFixed(2));
} else {
$(".total", row).val("");
}

var grand_total = 0;
$(".total").each(function() {
if (this.value != '') {
  grand_total += parseFloat(this.value);
}
});
grand_total *= (1 + $("#vat").val()/100);
$(".grand_total").val(grand_total.toFixed(2));

var totalht = 0;
 $(".total").each(function() {
if (this.value != '') {
  totalht += parseFloat(this.value);
}
});
$("#totalht").val(totalht.toFixed(2));

var vatis = totalht * $("#vat").val() / 100;
$(".vatis").val(vatis.toFixed(2));

var acpri = grand_total * $("#acompte").val() / 100;
$("#acpri").val(acpri.toFixed(2));
});

当然还有表格（请注意，这不是完整的表格，而是其中的一部分）

<table id="myTable">
 <tr>
   <td width="40%"><center><b>Description</b></center></td>
   <td width="10%"><center><b>Quantité</b></center></td>
   <td width="20%"><center><b>Prix U HT</b></center></td>
   <td width="10%"><center><b>Remise %</b></center></td>
   <td width="20%"><center><b>Total</b></center></td>
</tr>
<tr>
   <td colspan="5"></td>
</tr>
<tr>
  <td width="40%"><input type="text" id="des" name="des" placeholder="" class="form-control input-sm" value=""/></td>
  <td width="10%"><input type="text" id="qu" name="qu" placeholder="" class="form-control input-sm qu" value=""/></td>
  <td width="20%"><input type="text" id="pu" name="pu" placeholder="" class="form-control input-sm pu" value=""/></td>
  <td width="10%"><input type="text" id="rl" name="rl" placeholder="" class="form-control input-sm rl" value=""/></td>
  <td width="20%"><input type="text" id="tlht" name="tlht" placeholder="" class="form-control input-sm total" value=""/></td>
 </tr>                                      
</table>

控制按钮

<button href="#" class="btn btn-lg blue hidden-print margin-bottom-5" onclick="return myCreateFunction()">Ajouter une ligne</button>
<button class="btn btn-lg blue hidden-print margin-bottom-5" onclick="return myDeleteFunction()">Supprimer une ligne</button>

很多人为这个剧本做出了贡献，主要是关于堆栈溢出，我非常感谢它，我知道我必须四处搜索，并在我问之前尝试自己，我已经这样做了。

非常感谢你的帮助。

Answer 1

在加载页面时，您可以直接在元素上绑定事件。它并没有神奇地将事件与新元素挂钩。使用事件委派，以便获取动态元素

function doCalculations() {
   /* Put calculation code here */
}

$("#myTable").on("change",".pu, .qu, .rl", doCalculations);
$("#vat, #acompte").on("change", doCalculations);

javascript与2个脚本半冲突

1 个答案: