変更行の色TDが

Question

背景

をクリックしたときに、私は動的にPHPでテーブルを作成しています。 <td>の1つで、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がスクリプトによって生成されたとして、あなたは、いくつかのカウンタを設定し、すべての<tr>タグに固有のIDを追加し、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'); 
     //... 
    } 
    //... 
    //... 
} 

希望になるだろう！