Hinzufügen von HTML-Tabellenzeile mit jquery kann nicht wie markiert

Ich schrieb eine HTML-Datei mit einer Tabelle. Diese Tabelle enthält standardmäßig etwa 7 Einträge (Zeilen mit Daten). Wenn der Benutzer auf eine dieser Zeilen klickt, ändert sich die Hintergrundfarbe und es wird markiert, ich habe es mit der Umschaltfunktion jquery gemacht. Ich habe auch eine Schaltfläche, die weitere Zeilen in dieser Tabelle hinzufügt, auch mit jquery. Mein Problem: Wenn ich (Benutzer) einige Zeilen mit dieser Schaltfläche hinzufüge und auf diese neu hinzugefügten Zeilen klicke, ändert sich die Hintergrundfarbe nicht, aber die Hintergrundfarbe der Standardzeilen ändert sich.Hinzufügen von HTML-Tabellenzeile mit jquery kann nicht wie markiert

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

Quelle

2016-11-13 Lanatbaryazid

Sie das toggleClass Verhalten zu den vorhandenen Zeilen hinzufügen, nicht auch die neu geschaffen. Sie müssen das Ereignis hinzufügen, wenn Sie neue Zeilen erstellen:

$(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"); 
    }); 
    }); 
});

Quelle

2016-11-13 22:15:32

Hallo danke, was ist "ev" Sie in den Funktionsklammern geschrieben? – Lanatbaryazid

Sie verwenden es in diesem Fall nicht. Es ist das Ereignisobjekt, das zu jeder Funktion kommt, die als Ereignisrückruf definiert ist. Sie können ihm einen beliebigen Namen geben und ihn dann als Referenz verwenden, um die Ereigniseigenschaften zu überprüfen (Typ, Ziel, CurrentTarget ...) –

In Ordnung, das hat funktioniert, vielen Dank – Lanatbaryazid

Sie müssen auch die Reihe Click-Ereignisse mit .on Methode binden.

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

Quelle

2016-11-13 22:09:28 Sreekanth

Okay danke für die Antwort. Was ist die richtige Syntax, um das zu tun? – Lanatbaryazid

Ich habe das Snippet bereits mit der Bindung aktualisiert. – Sreekanth

danke funktioniert gut – Lanatbaryazid

Hinzufügen von HTML-Tabellenzeile mit jquery kann nicht wie markiert

Antwort

Verwandte Themen