我迫切需要帮助，我有一个要添加和删除带有按钮的行的表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Assessment</title>
<link rel="stylesheet" href="css/normalise.css">
<link rel="stylesheet" href="css/Main.css">
</head>
<body id="Mybody">
<form id="RiskManagement">
<fieldset>
<table id="myTable">
<tr>
<th>#</th>
<th>Activity conducted</th>
<th>Hazard associated with the activity</th>
<th>Risk associated with the hazard</th>
<th>Liklihood of risk manifesting</th>
<th>Consequence for when risk manifest</th>
<th>Risk rating</th>
<th>Risk severity level</th>
<th>Controls to implement</th>
</tr>
<tr class="MyRow" id="rs">
<td><input type="number" id="riskNumber" readonly></td>
<td><textarea type="text"></textarea></td> <!--activity input-->
<td><textarea type="text"></textarea></td> <!--Hazard input-->
<td><textarea type="text"></textarea></td> <!--risk input-->
<td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
<td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
<td id="myRisk"><input id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
<td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
<td><textarea type="text"></textarea></td>
<td><button class="remove" id="removeRows">-</button></td> <!--Remove button-->
</tr>
</table>
</fieldset>
<button id="addRow">+ Add</button>
</form>
<script src="js/app.js"></script>
</body>
</html>
请为我提供指导，甚至帮助我编写Java脚本中的一段代码，我可以使用它们使用按钮来添加和删除行。
我们将不胜感激。
答案 0 :(得分：2)
您的方法几乎是正确的，只需查看下面的代码并实施这些更改
function removeCurrentRow(indexOfRow) {
$('.MyRow').eq(indexOfRow).remove();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>#</th>
<th>Activity conducted</th>
<th>Hazard associated with the activity</th>
<th>Risk associated with the hazard</th>
<th>Liklihood of risk manifesting</th>
<th>Consequence for when risk manifest</th>
<th>Risk rating</th>
<th>Risk severity level</th>
<th>Controls to implement</th>
</tr>
<tr class="MyRow" id="rs">
<td><input type="number" id="riskNumber" readonly></td>
<td><textarea type="text"></textarea></td> <!--activity input-->
<td><textarea type="text"></textarea></td> <!--Hazard input-->
<td><textarea type="text"></textarea></td> <!--risk input-->
<td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
<td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
<td id="myRisk"><input id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
<td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
<td><textarea type="text"></textarea></td>
<td>
<button class="remove" onclick="removeCurrentRow(0)">-</button>
</td> <!--Remove button-->
</tr>
</table>
答案 1 :(得分：1)
$(document).ready(function(e) {
$('#addRow').on('click', function(){
var cln=$("#rs").clone()
$('#myTable').append(cln)
})
$('body').on('click','.remove',function(){
$(this).closest('tr').remove();
})
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Assessment</title>
<link rel="stylesheet" href="css/normalise.css">
<link rel="stylesheet" href="css/Main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body id="Mybody">
<form id="RiskManagement">
<fieldset>
<table id="myTable">
<tr>
<th>#</th>
<th>Activity conducted</th>
<th>Hazard associated with the activity</th>
<th>Risk associated with the hazard</th>
<th>Liklihood of risk manifesting</th>
<th>Consequence for when risk manifest</th>
<th>Risk rating</th>
<th>Risk severity level</th>
<th>Controls to implement</th>
</tr>
<tr class="MyRow" id="rs">
<td><input type="number" id="riskNumber" readonly></td>
<td><textarea type="text"></textarea></td> <!--activity input-->
<td><textarea type="text"></textarea></td> <!--Hazard input-->
<td><textarea type="text"></textarea></td> <!--risk input-->
<td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
<td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
<td id="myRisk"><input id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
<td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
<td><textarea type="text"></textarea></td>
<td><button class="remove" id="removeRows" type="button">-</button></td> <!--Remove button-->
</tr>
</table>
</fieldset>
<button id="addRow" type="button">+ Add</button>
</form>
</body>
</html>
答案 2 :(得分：0)
我认为removeRows的ID是错误的，因为您可能有多行，所以有多个按钮将删除该项目。我已经从桌子上拿走了那个ID。
//add click listener on table (you can now add and remove rows without it breaking)
document.querySelector('#myTable').addEventListener(
'click',
e=>{
//if the thing clicked has a class of remove
if(e.target.className==='remove'){
//remove parent of parent of the button (is the row)
e.target.parentElement.parentElement.remove();
}
}
);
document.querySelector('#addRow').addEventListener(
'click',
e=>{
//create a row and set innerhtml (removed all id's since they won't be unique)
const row = document.createElement('tr');
row.innerHTML = `
<td><input type="number" readonly></td>
<td><textarea type="text"></textarea></td> <!--activity input-->
<td><textarea type="text"></textarea></td> <!--Hazard input-->
<td><textarea type="text"></textarea></td> <!--risk input-->
<td ><input type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
<td ><input type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
<td ><input id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
<td ><input type="text" readonly></td> <!--severity level to auto display input-->
<td><textarea type="text"></textarea></td>
<td><button class="remove">-</button></td> <!--Remove button-->
`;
//add the row to the table
document.querySelector('#myTable').appendChild(row);
}
)<table id="myTable">
<tr>
<th>#</th>
<th>Activity conducted</th>
<th>Hazard associated with the activity</th>
<th>Risk associated with the hazard</th>
<th>Liklihood of risk manifesting</th>
<th>Consequence for when risk manifest</th>
<th>Risk rating</th>
<th>Risk severity level</th>
<th>Controls to implement</th>
</tr>
<tr class="MyRow" id="rs">
<td><input type="number" id="riskNumber" readonly></td>
<td><textarea type="text"></textarea></td> <!--activity input-->
<td><textarea type="text"></textarea></td> <!--Hazard input-->
<td><textarea type="text"></textarea></td> <!--risk input-->
<td ><input id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->
<td ><input id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> <!--consequence input-->
<td id="myRisk"><input id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating input-->
<td id="mySeverity"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->
<td><textarea type="text"></textarea></td>
<td><button class="remove">-</button></td> <!--Remove button-->
</tr>
</table>
<button id="addRow">+ Add</button>