我正在做一个健身房管理的项目，我需要从数据库中显示一个成员表，教练应该能够添加到他的表中最多5个成员，但我有一个问题，按钮将计数为5，然后当按钮被禁用时，它只会禁用第一个按钮。我认为这是因为他们都有相同的ID和功能，但我不'我不知道如何使它全部链接，所以当5个成员被选中时，所有按钮都被禁用。
var counter = 1;
function a() {
if (counter < 5) {
document.getElementById('a').innerHTML += "<input type='hidden'>";
counter++;
} else {
document.getElementById("id").disabled = true;
}
}
document.querySelector(document).ready(function() {
document.querySelector('.addbtn').click(function() {
document.querySelector(this).html(document.querySelector(this).html() == 'add' ? 'modify' : 'add');
});
});<!DOCTYPE html>
<html>
<head>
<script src="table1.js"></script>
</head>
<body>
<h1>Select 5 Members to train</h1>
<table border="1">
<tr>
<th>User_Id</th>
<th>User_Name</th>
<th>User_Email</th>
<th>ADD</th>
</tr>
<tr>
<td>1</td>
<td>Memeber 1</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
<tr>
<td>2</td>
<td>Memeber 2</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
<tr>
<td>3</td>
<td>Memeber 3</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
<tr>
<td>4</td>
<td>Memeber 4</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
<tr>
<td>5</td>
<td>Memeber 5</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
<tr>
<td>6</td>
<td>Memeber 6</td>
<td>Member@gmail.com</td>
<td><button class="addbtn" id="id" onClick="a();">add
</button></td>
</tr>
<div id='a'></div>
</tr>
</table>
</body>
</html>
1条答案
按热度按时间erhoui1w1#
首先，是的，id并不是要多次使用它。
取代：
你可以试试这个：