为什么添加脚本没有;t求和文本框中所有的int PHP添加变量

Question

我有下面的代码，当我添加脚本来添加总额文本框中显示的值时，它似乎无法正常工作

<tbody id='table'>
<tr class="crow">
<td style='width:150px;'>1</td>
<td style='width:350px;'>
<select class="form-control FID" required name="FID[]">
<?php 
$options="<option value='' Amount='0' >Select</option>";
foreach($data["challan"] as $row){
$options.="<option value='{$row["FID"]}' Amount='{$row["Amount"]}'>{$row["Feetype"]}</option>";
}
echo $options;
?>
</select> 
</td>
<td>
<input type="text" name="Amount[]" class="form-control Amount" required>
</td>
<td>
<input type="button" value="Remove" class="btn btn-link btn-xs rmv" required>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td ><input type='button' class='btn btn-link add' value='+Add Row'></td>
<td colspan="2" class="text-right">Total</td>
<td><input type="text" name="grand_total" id="grand_total" class="form-control" required=""></td>

</tr>
</tfoot>
</table>
</div>
</div>
</div>

<script>
$(document).ready(function(){

$("body").on("click",".add",function(){
var i=1;
$(".crow").each(function(){
i++;
});
var options="<?php echo $options; ?>";

var row='<tr class="crow"> <td>'+i+'</td> <td> <select class="form-control FID chosen" required name="FID[]">'+options+'</select></td><td> <input type="text" name="Amount[]" class="form-control  Amount" required> </td></td><td> <input type="button" value="Remove" class="btn btn-link btn-xs rmv" required> </td></tr>';
$("#table").append(row);
});


$("body").on("click",".rmv",function(){
if(confirm('Are You Sure?')){
$(this).parents('tr').remove();
}
});  


$("body").on("change",".FID",function(){
var p=$(this).find(":selected").attr("Amount");
$(this).closest("tr").find(".Amount").val(p);
});

$("body").on("keyup",".Amount",function(){
var Amount=Number($(this).val());

$(this).closest("tr").find(".total").val(Amount*1);
grand_total();
});


function grand_total(){
var tot=0;
$(".total").each(function(){
tot+=Number($(this).val());
});
$("#grand_total").val(tot);
}

});
</script>

我想得到一些帮助，如何在总额框中显示总额，它将添加总额列中显示的所有值，以在末尾的总额文本框中显示总数。我试着使用代码，但有些脚本似乎无法正常工作。感谢

Answer 1

我不使用jQuery(总是发现它不能像预期的那样工作(，但使用一些简单的香草Javascript，这是相当简单的，毫无疑问，如果需要，您可以将我在这里写的一些内容移植到jQuery代码中，但下面的示例似乎可以按您的需要工作。代码中有注释来描述正在发生的事情，但实际上delegated event listener绑定到文档本身(或者它可以是表(，并且由于事件冒泡，所有按钮单击和鼠标事件都被委派给正确的组件。为了帮助确定单击了哪些按钮以及它们要执行的任务，我只是在每个按钮上添加了一个数据集属性，而不是HTML与原来的一样，尽管很明显select菜单已经用伪数据硬编码，尽管硬编码的行号被css计数器替换了。希望你在以下内容中找到有价值的东西。。。

const d=document;
const total=d.querySelector('input[name="grand_total"]');

d.addEventListener('click',e=>{
/* Add new row */
if( e.target.classList.contains('btn-link') && e.target.dataset.action=='add' ){
let tbody=d.querySelector('tbody#table');
let tr=tbody.querySelector('tr:first-of-type');

/* clone the first table row and clear any values previously entered */
let clone=tr.cloneNode( true );
clone.querySelector('input[name="Amount[]"]').value='';
/* add the new row to the table. */
tbody.appendChild( clone );
}




/* Remove existing row - NOT first row though! */
if( e.target.classList.contains('btn-link') && e.target.dataset.action=='remove' ){
if( d.querySelectorAll('tbody#table tr').length > 1 ){
// We need to identify the value entered into 'Amount[]' so that we can remove
// it from the total.
let value=e.target.closest('tr').querySelector('input[name="Amount[]"]').value;

// find and remove the button's parent row
// using closest to move UP the DOM until it finds the TR node.      
d.querySelector('tbody#table').removeChild( e.target.closest('tr') );

// subtract this value from the total
total.value-=parseFloat( value )
}
}
});

// tally up all numbers entered by iterating through all input elements
// with the name Amount[]
d.addEventListener('keyup',e=>{
let col=d.querySelectorAll('input[name="Amount[]"]');

// convert nodelist to an array and use regular array methods (map & reduce)
// to return the sum
total.value=[...col]
.map(n=>n.value > 0 ? n.value : 0)
.reduce((a,b)=>parseFloat(a) + parseFloat(b));
});

html{counter-reset:rows}
tr{counter-increment:rows}
tbody td{border:1px dotted grey;padding:0.25rem}
tbody tr td:first-of-type::before{content:counter(rows);display:table-cell}
tfoot td{background:grey;padding:0.5rem;color:white}

<table>
<tbody id='table'>
<tr class='crow'>
<td style='width:150px;'></td>
<td style='width:350px;'>
<select class='form-control FID' required name='FID[]'>
<option value=1>banana
<option value=2>giraffe
<option value=3>hercules
<option value=4>didgeridoo
<option value=5>womble
</select>
</td>
<td>
<input type='text' name='Amount[]' class='form-control Amount' required />
</td>
<td>
<input data-action='remove' type='button' value='Remove' class='btn btn-link btn-xs rmv' required />
</td>
</tr>
</tbody>

<tfoot>
<tr>
<td><input data-action='add' type='button' class='btn btn-link add' value='+Add Row' /></td>
<td colspan='2' class='text-right'>Total</td>
<td><input type='text' name='grand_total' class='form-control' required /></td>
</tr>
</tfoot>
</table>