用jquery添加html表格行不能設置爲標記

我用表格寫了一個HTML文件。該表默認有大約7個條目（包含數據的行）。當用戶點擊其中一行時，背景顏色會發生變化，並且會變成標記，我使用jQuery切換功能來完成它。我也有一個按鈕，在此表中添加更多的行，也用jQuery。我的問題：當我（用戶）用該按鈕添加一些行並單擊這些新添加的行時，背景顏色不會改變，但默認行的背景顏色會改變。用jquery添加html表格行不能設置爲標記

<!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>

來源

2016-11-13 Lanatbaryazid

你添加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"); 
    }); 
    }); 
});

來源

2016-11-13 22:15:32

嗨，謝謝，什麼是你在函數括號中寫的「ev」？ – Lanatbaryazid

在這種情況下，您並未使用它。它是事件對象，涉及每個定義爲事件回調的函數。你可以給它任何名稱，然後用它作爲參考來檢查事件屬性（類型，目標，currentTarget ...） –

好的工作，非常感謝你 – Lanatbaryazid

你需要綁定的方法。對行點擊事件也是如此。

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

來源

2016-11-13 22:09:28 Sreekanth

好的，謝謝你的回覆。什麼是正確的語法來做到這一點？ – Lanatbaryazid

我已經使用綁定更新了片段。 – Sreekanth

謝謝工作正常 – Lanatbaryazid

用jquery添加html表格行不能設置爲標記

回答

相關問題