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循环。

Answer 2

您应该将事件添加到新的add元素中。这是您要寻找的示例：

$("#SaveNewDataTable").click(function () {
    var fname = $("#FirstName").val();
    var lname = $("#LastName").val();
    var pnumber = $("#PhoneNumber").val();

    var FnameTD = document.createElement("td");
    var lnameTD = document.createElement("td");
    var pnumberTD = document.createElement("td");

    FnameTD.append(fname);
    lnameTD.append(lname);
    pnumberTD.append(pnumber);

    var tr = document.createElement("tr");

    tr.append(FnameTD);
    tr.append(lnameTD);
    tr.append(pnumberTD);
    $(tr).appendTo($("#personalTable"));
    $("#personalTable tbody").append(tr);
    $("#FirstName").val('');
    $("#LastName").val('');
    $("#PhoneNumber").val('');
    addEventsToRow(tr);                   // Here you will add your events to your new row
});

// this function will add your events to a specific row
function addEventsToRow(tr)
{
    tr.addEventListener('mouseover',function(e){
        $(this).css('height','40px');
        $(this).css('background','orange');
        $(this).css('transform','scale(1.05)');   
    })
    tr.addEventListener('mouseout',function(e){
            $(this).css('height','');
            $(this).css('background','');
            $(this).css('transform','');
        })
}

// here you will add your events to your tables default rows.
 var tablerows = $('tr').not(":first");
for(var i= 0; i <tablerows.length; i+=1) addEventsToRow( tablerows[i])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="FirstName"/>
<input id="LastName"/>
<input id="PhoneNumber"/>
<button id="SaveNewDataTable">SaveNewDataTable</button>
<table class="table table-dark" id="personalTable">
          <thead>
            <tr>
              <th scope="col">First Name</th>
              <th scope="col">Last name</th>
              <th scope="col">Phone number</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Mark</td>
              <td>Otto</td>
              <td>231-183-215</td>
            </tr>
            <tr>

              <td>Jacob</td>
              <td>Thornton</td>
              <td>795-138-965</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>Bird</td>
              <td>695-188-265</td>
            </tr>
          </tbody>
        </table>

Answer 3

一种非常简单的方法是使用CSS而不是jquery。

tr:hover {
   background: yellow;
}

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

3 个答案: