Adding html table row with jquery can not set as marked

Question

I wrote a HTML file with a table. This table has about 7 entries (rows with data) by default. When the user clicks on one of these row the background color changes and it becomes marked, I did it with the jquery toggle function. I also have a button which adds further rows in this table, also with jquery. My problem: When I (user) add some rows with that button and click on those new added rows the background color doesn't change but the background color of default rows change.

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>


    $(document).ready(function(){
    $(".row").click(function(){
        $(this).toggleClass("activeRow");

    });
    $(document).on('click', '#addButton', function(){
    $(".myTable tbody").append(" <tr class=&quot;row&quot;> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>");
});


});
</script>
<style>
.activeRow{

    background-color:#B0BED9;
}
.myTable {
    border-collapse: collapse;
    width: 80%;
    clear:both;
    margin-top: 0;
    border-spacing: 0;
    table-layout: fixed;
    border-bottom: 1px solid #000000;



}
.myTable tbody, .myTable thead{

    display: block;
    width: 100%;
}

.myTable tbody{

    overflow: auto;
    height: 300px;

}

.myTable th, td{

    width: 450px;
}
</style
<table class="myTable">
    <thead>
    <tr id="headRow">
    <th>alo</th>
    <th>salam</th>
    <th>kissa</th>
    <th>chissa</th>

    </tr>
    </thead>

    <tbody class="bodyRows">

            <tr class="row" >
            <td>Microsoft</td>
            <td>Saber</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
          <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
                  <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
        <tr class="row">
            <td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
        </tr>
        <tr class="row">
            <td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
        </tr>
        <tr class="row">
            <td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
        </tr>

    </tbody>
    </table>


 <button id="addButton" class="tableButton">Add Row</button>

Sreekanth · Accepted Answer · 2016-11-13 22:09:28Z

You need to bind the row click events with .on method as well.

    $(document).ready(function() {

      $(document).on("click", ".myTable .row", function() {
        $(this).toggleClass("activeRow");
      });

      $(document).on('click', '#addButton', function() {
        $(".myTable tbody").append(" <tr class='row'> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>");
      });


    });

.activeRow {
  background-color: #B0BED9;
}
.myTable {
  border-collapse: collapse;
  width: 80%;
  clear: both;
  margin-top: 0;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom: 1px solid #000000;
}
.myTable tbody,
.myTable thead {
  display: block;
  width: 100%;
}
.myTable tbody {
  overflow: auto;
  height: 300px;
}
.myTable th,
td {
  width: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
  <thead>
    <tr id="headRow">

      <th>alo</th>
      <th>salam</th>
      <th>kissa</th>
      <th>chissa</th>

    </tr>
  </thead>

  <tbody class="bodyRows">

    <tr class="row">
      <td>Microsoft</td>
      <td>Saber</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Google</td>
      <td>50.2</td>
      <td>40.63</td>
      <td>45.23</td>
    </tr>
    <tr class="row">
      <td>Apple</td>
      <td>25.4</td>
      <td>30.2</td>
      <td>33.3</td>
    </tr>
    <tr class="row">
      <td>IBM</td>
      <td>20.4</td>
      <td>15.6</td>
      <td>22.3</td>
    </tr>

  </tbody>
</table>


<button id="addButton" class="tableButton">Add Row</button>

Okay thank you for response. What's the correct syntax to do that?

Javier Rey · Accepted Answer · 2016-11-13 22:15:32Z

1

You're adding the toggleClass behaviour to the existing rows, not the newly created ones. You need to add the event when you create new rows:

$(document).ready(function () {
  $(".row").on('click', function (ev) {
    $(this).toggleClass("activeRow");
  });
  $('#addButton').on('click', function (ev) {
    $(".myTable tbody").append(' <tr class="row"> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>');
    $(".row").off('click').on('click', function (ev) { // off, to avoid overloading listeners on click event
      $(this).toggleClass("activeRow");
    });
  });
});

answered Nov 13, 2016 at 22:15

Javier Rey

1,63820 silver badges31 bronze badges

3 Comments

Lanatbaryazid Over a year ago

Hi thanks, what is "ev" you wrote in the function brackets?

Javier Rey Over a year ago

You're not using it in this case. It's the event object, which comes to every function defined as an event callback. You can give it any name and then use it as a reference to inspect the event properties (type, target, currentTarget...)

Lanatbaryazid Over a year ago

I can't upvote because I got less than 15 reputations, sorry buddy but I marked it as working.

Collectives™ on Stack Overflow

Adding html table row with jquery can not set as marked

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related