表的更改行彩色當TD點擊

Question

背景

我動態使用PHP創建一個表。在<td>裏面我添加了一個js function。當用戶單擊該字段時，AJAX函數將運行並從數據庫表中刪除該行。

我想弄清楚如何定位該特定行以更新視圖以顯示該行已被刪除。我要麼刪除整行或將顏色更改爲紅色以顯示用戶行已從數據庫中刪除。

問題

當用戶點擊一個動態創建表的<td>內的鏈接，我怎麼能整列目標，以執行被點擊，在該行一個DOM操縱動作？

實施例代碼表

通知的onClick function在底部。該函數運行，當AJAX函數成功時，我想要刪除行或更改它的顏色。

<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功能

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

爲HTML通過腳本生成的，那麼你可以設置的某些櫃檯，並添加唯一的ID，以每<tr>標籤，然後通過removePDF() JS方法計數器。

的HTML代碼示例將

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

樣品JS代碼將

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'); 
     //... 
    } 
    //... 
    //... 
} 

希望這有助於！