Dungeoun Dungeoun - 1 month ago 6
CSS Question

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");

}

});
})

Answer

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>