我非常需要帮助,我有一个要添加和删除带有按钮的行的表。

<!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/

10-12 00:22
查看更多