javascript - 无法更改表中动态附加行的样式？

Question

我需要在按下 altKey 和鼠标悬停时更改背景和文本颜色。

问题是，我只能对 HTML 代码中显示的第一行执行此操作，而不能使用 jQuery 在随后附加的行中执行此操作。

HTML代码:

  <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 代码:

$(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 1

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

您需要委托(delegate)事件:

这种方式是错误的:

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

在您的情况下，您需要:

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

有关更多详细信息，请查看 SO doc

ID 必须是唯一的。这意味着您可以获得最后一个数值并递增它...

片段:

$(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>