CODEWITHSUNDEEP
javascriptjqueryhtmlcssdynamic
Amit-dat
Amit-dat

Reputation: 149

Unable to change style of dynamically appended rows in a table?

I need to change the background and text color upon altKey press and mouse hover.

The problem is, I can only do that for the first row shown in the HTML code, but not in the rows appended afterwards using jQuery.

HTML Code:

  <div class = "table1">

  <table id = "t1" align="center" border=1>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Telephone Number</th>
    </tr>
    <tr id = "r">
      <tbody>
        <td id = "d1" class = "el" contenteditable="true"></td>
        <td id = "d2" class = "el" contenteditable="true"></td>
        <td id = "d3" class = "el" contenteditable="true"></td>
        <td id = "d4" class = "el" contenteditable="true"></td>
        <td><button id="del1">Delete</button></td>
      </tbody>
    </tr>
  </table>

</div>

jQuery Code:

$(document).ready(function(){
 $("#b1").click(function(){

 $('#t1 > tbody:last-child').append('<tr id = "r"><td id = "d1" class = "el" contenteditable="true"></td><td id = "d2" class = "el" contenteditable="true"></td><td id = "d3" class = "el" contenteditable="true"></td><td id = "d4" class = "el" contenteditable="true"></td><td><button id ="del1">Delete</button></td></tr>');
 });

 $("#t1").on('click','#del1',function(){
    $(this).parent().parent().remove();
 });

 function handler(ev) {
  var target = $(ev.target);
  var elId = target.attr('id');
  if( target.is(".el") ) {

     $(this).css("background-color","white");
     $(this).css("color","black");
  }
 }
 $(".el").mouseleave(handler);


 $(".el").bind('mouseenter keypress','.el', function(e) {
  if (e.altKey) {

         $(this).css("background-color","blue");
         $(this).css("color","red");

  }

 });
})

Upvotes: 1

Views: 703

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

Unable to change style of dynamically appended rows in a table?

You need to delegate events:

This way is wrong:

$(".el").bind('mouseenter keypress','.el', function(e) {

In your case you need to:

$(document).on('mouseleave', '.el', handler);
$(document).on('mouseenter keypress', '.el', function(e) {...

For more details take a look to SO doc

The IDs must be unique. This means you can get the last numeric value and increment it...

The snippet:

$(document).ready(function(){
  $("#b1").click(function(){
    var lastIdidx = +$('#t1 tr:last td[id]:last').attr('id').substr(1);
    $('#t1 > tbody:last-child').append('<tr id = "r"><td id = "d' + (lastIdidx + 1) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 2) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 3) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 4) + '" class = "el" contenteditable="true"></td>' +
                                       '<td><button id ="del' + (lastIdidx + 5) + '">Delete</button></td></tr>');
  });

  $("#t1").on('click','#del1',function(){
    $(this).parent().parent().remove();
  });

  function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {

      $(this).css("background-color","white");
      $(this).css("color","black");
    }
  }
  $(document).on('mouseleave', '.el', handler);


  $(document).on('mouseenter keypress', '.el', function(e) {
    if (e.altKey) {
      $(this).css("background-color","blue");
      $(this).css("color","red");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="table1">
    <button id="b1">Add new Row</button>
    <table id="t1" align="center" border=1>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Telephone Number</th>
        </tr>
        <tr id="r">
            <tbody>
            <td id="d1" class="el" contenteditable="true"></td>
            <td id="d2" class="el" contenteditable="true"></td>
            <td id="d3" class="el" contenteditable="true"></td>
            <td id="d4" class="el" contenteditable="true"></td>
            <td>
                <button id="del1">Delete</button>
            </td>
            </tbody>
        </tr>
    </table>
</div>

Upvotes: 1

theTaoOfJS
theTaoOfJS

Reputation: 204

You are close. The problem is that handler is added before the rows are appended, so it's not attached to the dynamically added rows.

Add an event handler on the table itself rather than on the rows and then check for the target in there.

Upvotes: 0

StackOverMySoul
StackOverMySoul

Reputation: 2037

the events get attached to the DOM elements when your $(document).ready function runs, even if you are dynamically adding more elements with the same class, the events are not attached to those elements since they weren't there earlier. You need to attach the events to any new elements that you create dynamically:

var btn = document.createElement("button");
btn.addEventListener('click', myFunc, false);
document.body.appendChild(btn);

Upvotes: 0

Related Questions