javascript - 如何突出显示新添加的表格行？

Question

当我向表中添加新数据时，数据不想突出显示。 在没有函数的情况下输入的行中的数据会毫无问题地突出显示。你能告诉我为什么我的代码不起作用吗？非常感谢。

第一个函数将包含数据的行添加到我的表中。 我们还有一个循环负责突出显示该行。第二个循环从该行中取出动画。

$("#SaveNewDataTable").click(function() {
  var fname = $("#FirstName").val();
  var lname = $("#LastName").val();

  var FnameTD = document.createElement("td");
  var lnameTD = document.createElement("td");

  FnameTD.append(fname);
  lnameTD.append(lname);

  var tr = document.createElement("tr");

  tr.append(FnameTD);
  tr.append(lnameTD);
  $(tr).appendTo($("#personalTable"));
  $("#personalTable tbody").append(tr);
  $("#FirstName").val('');
  $("#LastName").val('');
});


var tablerows = $('tr').not(":first");
for (var i = 0; i < tablerows.length; i += 1) {
  tablerows[i].addEventListener('mouseover', function(e) {
    $(this).css('height', '40px');
    $(this).css('background', 'orange');
    $(this).css('transform', 'scale(1.05)');
  })
}

for (var i = 0; i < tablerows.length; i += 1) {
  tablerows[i].addEventListener('mouseout', function(e) {
    $(this).css('height', '');
    $(this).css('background', '');
    $(this).css('transform', '');
  })
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table table-dark" id="personalTable">
  <thead>
    <tr>
      <th scope="col">First Name</th>
      <th scope="col">Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
    <tr>
      <td>Larry</td>
      <td>Bird</td>
    </tr>
  </tbody>
</table>

<input id="FirstName">
<input id="LastName">
<button id="SaveNewDataTable">
        add
        </button>

Answer 1

如果我正确理解你的问题，那么鼠标悬停“突出显示”应该在你的 css 文件或样式标签中完成，而不是使用 JavaScript 事件监听器。

#personalTable tr:not(:first-child):hover { 
   background-color: orange;
   height: 40px;
   transform: scale(1.05)
}

并移除两个 for 循环。