我非常需要帮助,我有一个要添加和删除带有按钮的行的表。
<!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脚本中的一段代码,我可以使用这些代码使用按钮来添加和删除行。
帮助将不胜感激。
最佳答案
您的方法几乎是正确的,请看下面的代码并实施这些更改
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>
关于javascript - 如何使用按钮添加和删除行?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54020021/