ändern Zeilenfarbe der Tabelle Wann ist TD Clicked

Question

Hintergrund

ich dynamisch eine Tabelle mit php erschaffe. In einem der <td> bin ich eine js function hinzufügen. Wenn ein Benutzer auf dieses Feld klickt, wird eine AJAX-Funktion ausgeführt und löscht die Zeile aus der Datenbanktabelle.

Ich versuche herauszufinden, wie diese bestimmte Zeile zu zielen, um die Ansicht zu aktualisieren, um anzuzeigen, dass die Zeile gelöscht wurde. Ich wollte entweder die ganze Zeile löschen oder die Farbe in Rot ändern, um dem Benutzer zu zeigen, dass die Zeile aus der Datenbank entfernt wurde.

Frage

Wenn ein Benutzer auf einen Link klickt in einem <td> eines dynamischen Erstellung Tabelle, wie kann ich die ganze Zeile, um gezielt eine DOM Manipulieren Aktion auf der Zeile durchzuführen, die angeklickt wurde?

Beispielcode Tabelle

Beachten Sie die onClick function an der Unterseite. Diese Funktion läuft und wenn die AJAX-Funktion erfolgreich ist, möchte ich entweder die Zeile entfernen oder die Farbe ändern.

<tr> 
     <th>Customer ID</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Phone</th> 
     <th>Email</th> 
     <th>Download Letter</th> 
     <th>Template ID</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><?php echo $value->customer_id; ?></td> 
     <td><?php echo $value->fname; ?></td> 
     <td><?php echo $value->lname; ?></td> 
     <td><?php echo $value->phone; ?></td> 
     <td><?php echo $value->email; ?></td> 
     <td><a href="<?php echo $value->pdf_file_path; ?>"><?php echo $value->template_heading; ?></a></td> 
     <td><?php echo $value->temp_id; ?></td> 
     <td> 
      <a class="blue-text"><i class="options fa fa-user"></i></a> 
      <a class="green-text"><i class="options fa fa-pencil"></i></a> 
      <a class="red-text" href="#" onClick="removePDF(user_id, customer_id, temp_id)"><i class="options fa fa-times"></i></a> 
     </td> 
    </tr> 

AJAX Funktion

function removePDF(user_id, customer_id, temp_id){ 
    return $.ajax({ 
     url: 'https://www.example.com/script.php', 
     type: 'GET', 
     cache: false, 
     data: { 
      user_email: user_email, 
      user_id: user_id, 
      customer_id: customer_id, 
      temp_id: temp_id, 
     }, 
     success: function(data){ 
      console.log(data); 
     } 
    }); 
} 

Answer 1

Als HTML durch Skript erzeugt wird, dann können Sie einige Zähler gesetzt haben und die eindeutige ID zu jedem <tr> Tag hinzufügen, und dann diesen Zähler durch removePDF() JS-Methode übergeben.

Beispiel-HTML-Code wäre

<tr id="unique_num_<?= $unique_ctr; ?>"> 
    <!-- ... --> 
    <!-- ... --> 
    <td> 
     <a class="blue-text"><i class="options fa fa-user"></i></a> 
     <a class="green-text"><i class="options fa fa-pencil"></i></a> 
     <a class="red-text" href="javascript:void(0);" onClick="removePDF(user_id, customer_id, temp_id, <?= $unique_ctr; ?>)"><i class="options fa fa-times"></i></a> 
    </td> 
</tr> 

Beispiel JS Code

wird

function removePDF(user_id, customer_id, temp_id, tr_num) { 
    //... 
    //... 
    success: function (data) { 
     console.log(data); 
     $('#unique_num_' + tr_num).remove(); 
     //or 
     $('#unique_num_' + tr_num).addClass('my_class'); 
     //... 
    } 
    //... 
    //... 
} 

hoffe, das hilft!