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是通过脚本生成的，因此您可以设置一些计数器并为每个<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');
        //...
    }
    //...
    //...
}

希望这有帮助！

单击TD时更改表的行颜色

1 个答案: