当TD被点击时，改变表格的行颜色

Background

背景

I am dynamically creating a table with php. Inside one of the <td> I am adding a js function. When a user clicks that field an AJAX function runs and deletes the row from the database table.

我正在用php动态创建一个表。在其中一个中，我添加了一个js函数。当用户单击该字段时，AJAX函数将运行并从数据库表中删除该行。

I am trying to figure out how to target that specific row in order to update the view to show the row has been deleted. I was either going to delete the whole row or change the color to red to show the user the row has been removed from the database.

我正在尝试找出如何定位特定的行，以便更新视图以显示已删除的行。我要么删除整个行，要么将颜色改为红色，以向用户显示已从数据库中删除的行。

Question

问题

When a user clicks on a link inside a <td> of a dynamically creating table, how can I target the whole row in order to perform a DOM manipulating action on the row that was clicked?

当用户在一个动态创建的表的中单击链接时，我如何针对整个行进行攻击，以便在单击的行上执行DOM操作操作?

Example Code Table

示例代码表

Notice the onClick function at the bottom. That function runs and when the AJAX function is successful I want to either remove the row or change the color of it.

注意底部的onClick函数。这个函数运行，当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

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);
        }
    });
}

1 个解决方案

#1

As HTML is generated through script then you can have set some counter and add unique ID to every <tr> tag, and then pass that counter through removePDF() JS method.

由于HTML是通过脚本生成的，所以您可以设置一些计数器并向每个标记添加惟一的ID，然后通过removePDF() JS方法传递计数器。

Sample HTML code would be

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

Sample JS code will be

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

Hope this helps!

希望这可以帮助!

#1