用jquery添加html表行不能设置为标记

Adding html table row with jquery can not set as marked

本文关键字：设置 不能 jquery 添加 html      更新时间：2023-09-26

我写了一个带有表格的HTML文件。默认情况下，该表大约有7个条目(包含数据的行)。当用户单击其中一行时，背景颜色会发生变化并被标记，我使用jquery切换函数实现了这一点。我也有一个按钮，在这个表中添加进一步的行，也与jquery。我的问题:当我(用户)添加一些行与该按钮，并单击这些新添加的行背景颜色没有改变，但默认行的背景颜色改变。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){
    $(".row").click(function(){
        $(this).toggleClass("activeRow");
    });
    $(document).on('click', '#addButton', function(){
    $(".myTable tbody").append(" <tr class=&quot;row&quot;> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>");
});

});
</script>
<style>
.activeRow{
    background-color:#B0BED9;
}
.myTable {
    border-collapse: collapse;
    width: 80%;
    clear:both;
    margin-top: 0;
    border-spacing: 0;
    table-layout: fixed;
    border-bottom: 1px solid #000000;

}
.myTable tbody, .myTable thead{
    display: block;
    width: 100%;
}
.myTable tbody{
    overflow: auto;
    height: 300px;
}
.myTable th, td{
    width: 450px;
}
</style
<table class="myTable">
    <thead>
    <tr id="headRow">
    <th>alo</th>
    <th>salam</th>
    <th>kissa</th>
    <th>chissa</th>
    </tr>
    </thead>
    <tbody class="bodyRows">
            <tr class="row" >
            <td>Microsoft</td>
            <td>Saber</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
          <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
                  <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
            <tr class="row">
            <td>Huawei</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
        </tr>
        <tr class="row">
            <td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
        </tr>
        <tr class="row">
            <td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
        </tr>
        <tr class="row">
            <td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
        </tr>
    </tbody>
    </table>

 <button id="addButton" class="tableButton">Add Row</button>

您还需要将行单击事件与。on方法绑定。

    $(document).ready(function() {
      $(document).on("click", ".myTable .row", function() {
        $(this).toggleClass("activeRow");
      });
      $(document).on('click', '#addButton', function() {
        $(".myTable tbody").append(" <tr class='row'> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>");
      });
    });
.activeRow {
  background-color: #B0BED9;
}
.myTable {
  border-collapse: collapse;
  width: 80%;
  clear: both;
  margin-top: 0;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom: 1px solid #000000;
}
.myTable tbody,
.myTable thead {
  display: block;
  width: 100%;
}
.myTable tbody {
  overflow: auto;
  height: 300px;
}
.myTable th,
td {
  width: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
  <thead>
    <tr id="headRow">
      <th>alo</th>
      <th>salam</th>
      <th>kissa</th>
      <th>chissa</th>
    </tr>
  </thead>
  <tbody class="bodyRows">
    <tr class="row">
      <td>Microsoft</td>
      <td>Saber</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Huawei</td>
      <td>20.3</td>
      <td>30.5</td>
      <td>23.5</td>
    </tr>
    <tr class="row">
      <td>Google</td>
      <td>50.2</td>
      <td>40.63</td>
      <td>45.23</td>
    </tr>
    <tr class="row">
      <td>Apple</td>
      <td>25.4</td>
      <td>30.2</td>
      <td>33.3</td>
    </tr>
    <tr class="row">
      <td>IBM</td>
      <td>20.4</td>
      <td>15.6</td>
      <td>22.3</td>
    </tr>
  </tbody>
</table>
<button id="addButton" class="tableButton">Add Row</button>

将toggleClass行为添加到现有行，而不是新创建的行。您需要在创建新行时添加事件:

$(document).ready(function () {
  $(".row").on('click', function (ev) {
    $(this).toggleClass("activeRow");
  });
  $('#addButton').on('click', function (ev) {
    $(".myTable tbody").append(' <tr class="row"> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>');
    $(".row").off('click').on('click', function (ev) { // off, to avoid overloading listeners on click event
      $(this).toggleClass("activeRow");
    });
  });
});
相关文章：