Need Help Transferring Data Between HTML Tables

Question

I have two tables, one with a list of players for you to choose with a checkbox and another where the players are supposed to appear after clicking the checkbox. There is also a div in table2 that subtracts the player's value from the set $35000 value.

When I click the checkbox, the player goes to table2 and the salary subtracts, like expected, but when I uncheck the checkbox, the player returns to table1 and the salary doesn't return back to $35000. Also it will not let click that same player again, so I was wondering what the problem may be.

Here's the Code Below:

$(document).ready(function() {
  $('#table1 tbody tr td input.checkmark').on('click', function() {

    var row = $(this).closest('tr').clone();
    $('#tbody2').append(row);
    $(this).closest('tr').remove();

  });

  $('body').on('click', '#table2 tbody tr td input.checkmark', function() {

    if (!$(this).prop('checked')) {
      var row = $(this).closest('tr').clone();
      $('#tbody1').prepend(row);
      $(this).closest('tr').remove();
    }

  });
})

//FUNCTION FOR TOTALING SALARY
function calc() {

  var salary = $('[name="salary"]');
  var sum = 35000;

  $('[name="salary"]').each(function() {
    if (this.checked) {
      sum -= parseInt($(this).val());
    }
    $("#salary_total").val(sum);
  });
};

//CLICK EVENT HANDLER   
$(document).ready(function() {
  $('[name="salary"]').on('click', calc);
});

<div class="table_container">

<table class="mytable" id="table1">
<caption><figure class="table_head">Players</figure></caption>

<thead><tr class="table1">
<th>Position</th>
<th> Name</th>
<th>FPPG</th>
<th>Salary</th>
<th>Game</th>
<th></th>
 </tr></thead>

<tbody id="tbody1">

    <tr class="table1">
    <td>P</td>
    <td>Stephen Strasburg</td>
    <td>39.56</td>
    <td>10,800</td>
    <td>MIL@WAS</td>
    <td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10800"></td>
    </tr>
    
    <tr class="table1">
    <td>P</td>
    <td>Patrick Corbin</td>
    <td>38.82</td>
    <td>10,500</td>
    <td>MIL@WAS</td>
    <td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10500"></td>
    </tr>
    
    <form id="playerForm">

<table class="mytable" id="table2">
    <caption align="bottom">
    
    <figure id="max">Max Salary: $35,000</figure>

    <figcaption>
    <button class="optimize_btn" id="optimizeButton">Optimize</button>
    
    <button class="optimize_btn" id="reset">Clear</button>
    </figcaption>
    
    </caption>
     
    <caption>
    <figure class="table_head">My Team</figure>
    <figcaption><div class="dollar">
    
    <input name="calc" disabled="" class="salary_count good" id="salary_total"  type="number" max="35000" value="35000"></div>
    
</figcaption>
    </caption>
    <thead><tr class="table2"></tr></thead>
    
<tbody id="tbody2">
</tbody>
    </table></form>

   
.mytable{
 
 background-color: blanchedalmond;
 font-size: 20px;
 overflow: scroll;
 
 
}


.table_head{
 width:300px;
 font-size: 2rem;
 font-weight: bolder;
}

.mytable th:first-child {
 
  padding-left: 10px;
}
.mytable tr {
  
  padding-left: 10px;
}
.mytable tr td:first-child {
  
  padding-left: 10px;
  border-left: 0;
}
.mytable tr td {
  padding: 8px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
  background: #f6f6f6;
  background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
  background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
  border-bottom: 0;
}
.mytable tr:last-child td:first-child {
  -moz-border-radius-bottom-left: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
  -moz-border-radius-bottom-right: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
  background: #f2f2f2;
  transform: scale(1.01);
  padding-left: 10px;
  outline: 1px solid #191970;
  -moz-box-shadow: 10px 10px 5px #888;
  -webkit-box-shadow: 10px 10px 5px #888;
  box-shadow: 10px 10px 5px #888;
}


  #footer{
 background-color: hsl(291,5%,29%);
 color: ivory;
 text-align: center;
 font-size: 0.8em;
 font-variant:small-caps;
 padding-top: 5px;
 padding-bottom: 5px;
  
   bottom:0;
   width:100%;
 clear: both;
 margin: 0 auto;

}
  #wrapper_lineup{
 
 margin: 0 auto;
 position: relative;
 
 max-width: 1284px;
 background-color: #fff;
}

.header{
 text-align: center;
  padding-bottom: 15px;
}
  
  .table_container{width:1200px;margin:0 auto;}
  
  table{
   float: left;
  }



.salary_count {
 width: 120px !important;
 padding: 7px;
 display: inline-block;
 border: 1px hidden;
 border-radius: 4px;
 
 font-family: brush-script-std;
 
 font-weight: bold;
 background-color: white;
 
 font-size: 2.8rem;
}

.dollar{
 display:inline-block;
 position: relative;
 
 font-size: 2.8rem;
 font-family: brush-script-std;
 color: black;
 font-weight: bold;
 }
.dollar input{
 padding-left:15px;
 }
.dollar:before {
 position: absolute;
    content:"$";
    left:-10px;
 top:8px;
  }
#table1{
 margin-right: 10px;
 overflow: auto;
 cursor: pointer;
}
  
  #table2{
   margin-left: 40px;
   cursor: pointer;
  }
.checkmark {
  border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    height: 25px;
    width: 25px;
    background-color: skyblue;
}



.over{
  background-color: white;
  color:red;
  font-weight: bold;
}

div[comma-value]{
    position:relative;
}
div[comma-value]:before{
    content: attr(comma-value);
    position:absolute;
    left:0;
}
div[comma-value] input{
    color:#fff;
}
.optimize_btn {
   background: none;
    border: 1px solid #dbdbdb;
    cursor: pointer;
    background-color: #11AAFF;
 color: white;
    font-family: 'Aaux-Next-Regular';
    font-size: 20px;
   
    width: 120px;
    height: 50px
}
.optimize_btn:hover{
  background-color: white;
 color: black;
}

.choose{
 color: black;
font-weight:lighter;
 font-size: 2rem;
}

.select_pos{
 color: deepskyblue;
 font-weight:bolder;
 font-size: 2rem;
}

#max{
 color: black;
 width:200px;
}

I tried to make a [mcve] Can you just post enought HTML and not XML or PHP to show the issue??? — mplungjan, Oct 15 '19 at 17:13
Sorry about that, just edited it. Tried my best to minimalize it. — Chris Benzola, Oct 15 '19 at 17:39

score 0 · Accepted Answer · answered Oct 15 '19 at 17:49

This is your offending line: $('#table1 tbody tr td input.checkmark').on('click', ...)

^^ This is a statically run query select by jquery, meaning when you clone the rows back to your original table they are not the original dom elements so they no longer have this event handler.

What you'll want to do is write an addListener function that will take the table row and attach the appropriate event handlers to it. In this case:

  $('#table1 tbody tr td input.checkmark').on('click', move_to_table2);

  function move_to_table2() {
    var row = $(this).closest('tr').clone();
    $('#tbody2').append(row);
    $(this).closest('tr').remove();
  }

  ...

  (inside table2's event handler)
  var row = $(this).closest('tr').clone();
  $(row).on('click', move_to_table2)
  ...

My example borks up the salary calculation but I think you can handle that!

Ah, alright I got it! Thank you, appreciate it. – Chris Benzola Oct 15 '19 at 18:43 — Chris Benzola, Oct 15 '19 at 18:43

Need Help Transferring Data Between HTML Tables

1 Answers1