我根據(jù)我對(duì)提供的代碼片段的解釋（類似于我今天早些時(shí)候看到的另一個(gè)問題）快速整理了一個(gè)演示，說明你如何做你想做的事~復(fù)制所有并保存為 php 文件以運(yùn)行。本質(zhì)上，您想完全分離 PHP 和 Javascript - 還要?jiǎng)h除任何內(nèi)聯(lián)事件處理程序。通過使用querySelectorAll，sibling selectors您可以非常輕松地遍歷 DOM 以識(shí)別感興趣的元素并分配偵聽器。如果您使用ID屬性然后依賴document.getElementById您自己，因?yàn)槟仨毟?ID - 這當(dāng)然必須是唯一的。過去的情況是，ID 屬性不能簡單地是一個(gè)整數(shù) - 隨著引入的引入而放松了HTML5- 但在 imo 中，使用整數(shù)作為 ID 仍然不是一個(gè)好習(xí)慣。
以下內(nèi)容可能無法完全滿足您的要求，但可以很好地了解如何訪問 DOM 中的元素并相應(yīng)地觸發(fā)函數(shù)。祝你好運(yùn)。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Dynamic elements Price Increment & Decrement</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
Array.prototype.slice.call( document.querySelectorAll('td > input[ type="button" ]') ).forEach( input=>{
input.addEventListener('click',function(e){
let qty=this.parentNode.querySelector('input[name="qty[]"]');
let price=this.parentNode.querySelector('input[name="price[]"]');
let sum=this.parentNode.querySelector('input[name="sum[]"]');
switch( this.dataset.dir ){
case 'increment':
qty.value++;
break;
case 'decrement':
if( qty.value > 1 ) qty.value--;
else {
alert( 'Quantity cannot be less than 1' );
}
break;
}
sum.value=qty.value * price.value;
});
});
});
</script>
<style>
table{width:100%;}
tr{width:100%;}
td{display:flex;justify-content:space-between;align-items:center;align-content:center;}
[type='button']{ width:2rem; height:2rem; text-align:center; font-size:1rem; clear:none; cursor:pointer; margin:0.25rem; }
[type='text']{ height:2rem; margin:0.25rem; text-align:center; }
td *{ display:inline-block; }
label{width:20%;}
label > input{float:right}
label:before{content:attr(data-label)}
[readonly]{background:rgba(255,0,0,0.1)}
</style>
</head>
<body>
<form>
<table>
<?php
for( $i=1; $i <=10; $i++ ){
$qty=mt_rand(1,10);
$price=mt_rand(1,100);
printf('
<tr>
<td>
<input type="button" data-dir="decrement" value="-" />
<label data-label="Quantity" for="qty"><input type="number" name="qty[]" value="%d" min=1 /></label>
<label data-label="Price" for="price"><input type="number" name="price[]" value="%d" min=1 readonly /></label>
<label data-label="Total" for="sum"><input type="number" name="sum[]" value="%d" readonly /></label>
<input type="button" data-dir="increment" value="+" />
</td>
</tr>',
$qty,
$price,
$qty * $price );
}
?>
</table>
</form>
</body>
</html>
