Adding table row for only specific table

Question

I have a table of two for different exercise and my goal is to be able to add new row for each exercise. Below I have a working snippet:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Icons -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
    body {
      color: #404E67;
      background: #F5F7FA;
      font-family: 'Open Sans', sans-serif;
    }
    
    .table-wrapper {
      width: 40%;
      margin: 30px auto;
      background: transparent;
      padding: 20px;
      border-style: solid;
      height: 50%;
    }
    
    .table-title {
      padding-bottom: 10px;
      margin: 0 0 10px;
    }
    
    .table-title h2 {
      margin: 6px 0 0;
      font-size: 22px;
    }
    
    table.table {
      margin-left: em;
    }
    
    table.table tr th,
    table.table tr td {
      border-color: #e9e9e9;
      position: relative;
    }
    
    table.table th i {
      font-size: 13px;
      margin: 0 5px;
      cursor: pointer;
    }
    
    table.table th:last-child {
      width: 100px;
    }
    
    table.table td a {
      cursor: pointer;
      display: inline-block;
      margin: 0 5px;
      min-width: 24px;
    }
    
    table.table td a.add {
      color: #27C46B;
    }
    
    table.table td a.edit {
      color: #FFC107;
    }
    
    table.table td a.delete {
      color: #E34724;
    }
    
    table.table td i {
      font-size: 19px;
    }
    
    table.table td a.add i {
      font-size: 24px;
      margin-right: -1px;
      position: relative;
      top: 3px;
    }
    
    table.table .form-control {
      height: 32px;
      line-height: 32px;
      box-shadow: none;
      border-radius: 2px;
      position: absolute;
      width: calc(100% - 24px);
      padding: 0px;
    }
    
    table.table .form-control.error {
      border-color: #f50000;
    }
    
    table.table td .add {
      display: none;
    }
    
    table th {
      width: auto !important;
      color: white;
      text-align: center;
      vertical-align: middle;
    }
    
    td {
      color: white;
      text-align: center;
      vertical-align: middle;
    }
    
    .head {
      background-color: #4D4F5C;
      border-bottom: 3px solid white;
    }
    
    #body {
      background-color: #4D4F5C;
    }
    
    #add_button {
      margin-left: 9.5em;
    }
    
    h4 {
      text-align: center;
    }
    
    #name {
      text-align: center;
    }
    
    #reps {
      text-align: center;
    }
    
    #weight {
      text-align: center;
    }
    
    #edit {
      text-align: center;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
      var actions = $("table td:last-child").html();

      // Append table with add row form on add new button click
      $(".add-new").click(function() {
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var row =
          '<tr>' +
          '<td><input type="text" class="form-control" name="name" id="name"></td>' +
          '<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
          '<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
          '<td>' + actions + '</td>' +
          '</tr>';
        $("table").append(row);
        $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();
      });

      // Add row on add button click
      $(document).on("click", ".add", function() {
        var empty = false;
        var input = $(this).parents("tr").find('input[type="text"]');
        input.each(function() {
          if (!$(this).val()) {
            $(this).addClass("error");
            empty = true;
          } else {
            $(this).removeClass("error");
          }
        });
        $(this).parents("tr").find(".error").first().focus();
        if (!empty) {
          input.each(function() {
            $(this).parent("td").html($(this).val());
          });
          $(this).parents("tr").find(".add, .edit").toggle();
          $(".add-new").removeAttr("disabled");
        }
      });

      // Edit row on edit button click
      $(document).on("click", ".edit", function() {
        $(this).parents("tr").find("td:not(:last-child)").each(function() {
          $(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").attr("disabled", "disabled");
      });

      // Delete row on delete button click
      $(document).on("click", ".delete", function() {
        $(this).parents("tr").remove();
        $(".add-new").removeAttr("disabled");
      });
    });
  </script>
</head>

<body>
  <div class="container">
    <div class="table-wrapper">
      <div class="table-title">
        <h4>AB ROLL OUTS</h4>
      </div>
      <table class="table table-borderless">
        <thead>
          <tr class="head">
            <th>Set</th>
            <th>Weight(Kg)</th>
            <th>Reps</th>
            <th></th>
          </tr>
        </thead>
        <tbody class="" id="body">
          <tr>
            <td>1</td>
            <td>30</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>30</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
        </tbody>
      </table>
      <button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
    </div>

    <div class="table-wrapper">
      <div class="table-title">
        <h4>AB ROLL OUTS</h4>
      </div>
      <table class="table table-borderless">
        <thead>
          <tr class="head">
            <th>Set</th>
            <th>Weight(Kg)</th>
            <th>Reps</th>
            <th></th>
          </tr>
        </thead>
        <tbody class="" id="body">
          <tr>
            <td>1</td>
            <td>20</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>15</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
        </tbody>
      </table>
      <button id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
    </div>
  </div>
</body>

</html>

As you can see, if you try to add a new set to one exercise, it will also add a new line for the other exercise, which is not what I wanted. What I want is to be able to add a new set for specific exercise, without a new row being automatically added to another exercise.

How can I achieve this?

Matt Oestreich · Accepted Answer · 2019-12-10 20:53:02Z

You have to uniquely identify each table and button in order to accomplish this. The easiest way is to add an unique id attribute to each table, then add that same value to a name attribute on the respective button.

Meaning, if we call the first table "table1" it needs an id attribute that equals "table1".. then the 'Add Set' button for that table needs to have a name attribute that is also "table1"..(keep in mind I am just using the value "table1" as an example - "table1" could be any value you want, just as long as they match... they have to match due to how I coded the function) For example:

<table id="table1"> ...

<button name="table1">...

This is just one way to do it.. You can do it differently.. the trick is just making sure you can uniquely identify each table and the button on that table..

I have made comments in the code below to make things more legible/understandable..

Demo:

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
    var actions = $("table td:last-child").html();
    // Append table with add row form on add new button click
    $(".add-new").click(function () {
        $(this).attr("disabled", "disabled");
        //
        // ** Get the unique value we are using from the button **
        //
        let tableName = $(this).attr('name');
        
        //
        // ** Use the unique value on that button, to find the table **
        //
        var index = $(`#${tableName} tbody tr:last-child`).index();
        var row =
            '<tr>' +
            '<td><input type="text" class="form-control" name="name" id="name"></td>' +
            '<td><input type="text" class="form-control" name="weight" id="weight"></td>' +
            '<td><input type="text" class="form-control" name="reps" id="reps"></td>' +
            '<td>' + actions + '</td>' +
            '</tr>';
        //
        // ** Use the unique value to append row to correct table **
        //
        $(`#${tableName}`).append(row);
        $(`#${tableName} tbody tr`).eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();
    });
    // Add row on add button click
    $(document).on("click", ".add", function () {
        var empty = false;
        var input = $(this).parents("tr").find('input[type="text"]');
        input.each(function () {
            if (!$(this).val()) {
                $(this).addClass("error");
                empty = true;
            } else {
                $(this).removeClass("error");
            }
        });
        $(this).parents("tr").find(".error").first().focus();
        if (!empty) {
            input.each(function () {
                $(this).parent("td").html($(this).val());
            });
            $(this).parents("tr").find(".add, .edit").toggle();
            $(".add-new").removeAttr("disabled");
        }
    });
    // Edit row on edit button click
    $(document).on("click", ".edit", function () {
        $(this).parents("tr").find("td:not(:last-child)").each(function () {
            $(this).html('<input type="text" class="form-control w-2" id="edit" value="' + $(this).text() + '">');
        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").attr("disabled", "disabled");
    });
    // Delete row on delete button click
    $(document).on("click", ".delete", function () {
        $(this).parents("tr").remove();
        $(".add-new").removeAttr("disabled");
    });
});

body {
    color: #404E67;
    background: #F5F7FA;
    font-family: 'Open Sans', sans-serif;
  }

  .table-wrapper {
    width: 40%;
    margin: 30px auto;
    background: transparent;
    padding: 20px;
    border-style: solid;
    height: 50%;
  }

  .table-title {
    padding-bottom: 10px;
    margin: 0 0 10px;
  }

  .table-title h2 {
    margin: 6px 0 0;
    font-size: 22px;
  }

  table.table {
    margin-left: em;
  }

  table.table tr th,
  table.table tr td {
    border-color: #e9e9e9;
    position: relative;
  }

  table.table th i {
    font-size: 13px;
    margin: 0 5px;
    cursor: pointer;
  }

  table.table th:last-child {
    width: 100px;
  }

  table.table td a {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    min-width: 24px;
  }

  table.table td a.add {
    color: #27C46B;
  }

  table.table td a.edit {
    color: #FFC107;
  }

  table.table td a.delete {
    color: #E34724;
  }

  table.table td i {
    font-size: 19px;
  }

  table.table td a.add i {
    font-size: 24px;
    margin-right: -1px;
    position: relative;
    top: 3px;
  }

  table.table .form-control {
    height: 32px;
    line-height: 32px;
    box-shadow: none;
    border-radius: 2px;
    position: absolute;
    width: calc(100% - 24px);
    padding: 0px;
  }

  table.table .form-control.error {
    border-color: #f50000;
  }

  table.table td .add {
    display: none;
  }

  table th {
    width: auto !important;
    color: white;
    text-align: center;
    vertical-align: middle;
  }

  td {
    color: white;
    text-align: center;
    vertical-align: middle;
  }

  .head {
    background-color: #4D4F5C;
    border-bottom: 3px solid white;
  }

  #body {
    background-color: #4D4F5C;
  }

  #add_button {
    margin-left: 9.5em;
  }

  h4 {
    text-align: center;
  }

  #name {
    text-align: center;
  }

  #reps {
    text-align: center;
  }

  #weight {
    text-align: center;
  }

  #edit {
    text-align: center;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Icons -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="table-wrapper">
      <div class="table-title">
        <h4>AB ROLL OUTS</h4>
      </div>
      <!--
      ==========================================================================
        ** Give each table an id **
        ** this id must match the NAME attribute on the 'Add Set' button
      ==========================================================================
      -->
      <table id="table1" class="table table-borderless">
        <thead>
          <tr class="head">
            <th>Set</th>
            <th>Weight(Kg)</th>
            <th>Reps</th>
            <th></th>
          </tr>
        </thead>
        <tbody class="" id="body">
          <tr>
            <td>1</td>
            <td>30</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>30</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
        </tbody>
      </table>
      <!--
      =============================================================================
        ** Give each button a name attribute **
        ** this name attribute must match the ID attribute on the correct Table **
      =============================================================================
      -->      
      <button name="table1" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
    </div>

    <div class="table-wrapper">
      <div class="table-title">
        <h4>AB ROLL OUTS</h4>
      </div>
      <!--
      ==========================================================================
        ** Give each table an id **
        ** this id must match the NAME attribute on the 'Add Set' button **
      ==========================================================================
      -->        
      <table id="table2" class="table table-borderless">
        <thead>
          <tr class="head">
            <th>Set</th>
            <th>Weight(Kg)</th>
            <th>Reps</th>
            <th></th>
          </tr>
        </thead>      
        <tbody class="" id="body">
          <tr>
            <td>1</td>
            <td>20</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>15</td>
            <td>12</td>
            <td>
              <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
              <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
            </td>
          </tr>
        </tbody>
      </table>
      <!--
      =============================================================================
        ** Give each button a name attribute **
        ** this name attribute must match the ID attribute on the correct Table **
      =============================================================================
      -->   
      <button name="table2" id="add_button" type="button" class="btn btn-dark add-new"><i class="fa fa-plus"></i> Add Set</button>
    </div>
  </div>
</body>

</html>

I had this idea as well, however what if I try to take the data from a database and using loop wouldn't it stay the same (with the problem I have) because id is not unique?

Collectives™ on Stack Overflow

Adding table row for only specific table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related