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.
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?
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.
<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
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);
}
});
}
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.
Sample HTML code would be
<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
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!