0

I am desperately in need for assistance, I have a table for which I want to add and remove rows with buttons.

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

please assist me with guidelines or even a piece of code in java script that I can use to add and delete rows using the buttons.

Help would be greatly appreciated.

Nandini Venkateshan
  • 257
  • 3
  • 9
Ruan Davis
  • 1
  • 5

3 Answers3

2

You are almost correct with your approach, just see below code and implement these changes

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>
  • When adding rows then you are in trouble with the onClick. Better to add the remove click handler on the table with `addEventListener` so it'll always handle the remove; also for rows that were dynamically added. – HMR Jan 03 '19 at 10:26
  • See AJAY MAURYA answer for an example of how you use jQuery [event delegation](https://learn.jquery.com/events/event-delegation/). It is best [not to attach event handling in html](https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) – HMR Jan 03 '19 at 10:33
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>
AJAY MAURYA
  • 541
  • 3
  • 11
  • Good for using [event delegation](https://learn.jquery.com/events/event-delegation/) but when you clone an element you will end up having multiple id's. The id's should be removed from the table row and the elements it contains. – HMR Jan 03 '19 at 10:31
0

I assume the id of removeRows is wrong because you may have multiple rows so multiple buttons that will remove the item. I have taken that id out of the table.

//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>
HMR
  • 37,593
  • 24
  • 91
  • 160