javascript - 单击 TD 时更改表格的行颜色

Question

背景

我正在用 php 动态创建一个表。 <td>里面的一个我正在添加 js function .当用户单击该字段时 AJAX函数运行并从数据库表中删除行。

我正在尝试弄清楚如何定位该特定行以更新 View 以显示该行已被删除。我打算删除整行或将颜色更改为红色以向用户显示该行已从数据库中删除。

问题

当用户点击 <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');
        //...
    }
    //...
    //...
}

希望这对您有所帮助!