I have an HTML file as below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.style1 {
background-color: #c3d9ff;
font-family:arial,sans-serif;
}
.style2 {
text-align: center;
font-weight: bold;
}
.style3 {
background-color: #FFFFFF;
font-family:arial,sans-serif;
text-align: center;
font-weight: bold;
}
.style4 {
background-color: #FFFFFF;
font-family:arial,sans-serif;
text-align: left;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
background-color: ;
}
.action_button {
font-weight:bold;
float:right;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".action_button").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent().parent();
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: false,
success: function()
{
if(id % 2)
{
parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
}
else
{
parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
}
}
});
return false;
});
});
$(document).ready(function() {
$('.action_button').click(function() {
$(this).text($(this).text().trim() == 'Inactivate' ? 'Activate' : 'Inactivate');
var $col5 = $(this).closest('tr').find('.clickme2');
$col5.text( $col5.text().trim() == 'Inactive' ? 'Active' : 'Inactive');
return false;
});
});
</script>
</head>
<body>
<table style="width: 90%" align="center" class="style1">
<tr>
<td colspan="7" class="style2">MANAGER</td>
</tr>
<tr>
<td class="style3" style="width: 139px">Col1</td>
<td class="style3" style="width: 139px">Col2</td>
<td class="style3" style="width: 139px">Col3</td>
<td class="style3" style="width: 139px">Col4</td>
<td class="style3" style="width: 139px">Col5</td>
<td class="style3" style="width: 200px">Col6</td>
<td class="style3" style="">Action</td>
</tr>
</table>
<td id="main" class="main">
<td class="update">
<table style="width: 90%" align="center" class="style1">
<tr>
<td class="style4" style="width: 139px">DataA1</td>
<td class="style4" style="width: 139px">DataA2</td>
<td class="style4" style="width: 139px">DataA3</td>
<td class="style4" style="width: 139px">DataA4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataA6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Activa开发者_C百科te</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataB1</td>
<td class="style4" style="width: 139px">DataB2</td>
<td class="style4" style="width: 139px">DataB3</td>
<td class="style4" style="width: 139px">DataB4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataB6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataC1</td>
<td class="style4" style="width: 139px">DataC2</td>
<td class="style4" style="width: 139px">DataC3</td>
<td class="style4" style="width: 139px">DataC4</td>
<td class="style4 clickme2" style="width: 139px">Active</td>
<td class="style4" style="width: 200px">DataC6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Inactivate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataD1</td>
<td class="style4" style="width: 139px">DataD2</td>
<td class="style4" style="width: 139px">DataD3</td>
<td class="style4" style="width: 139px">DataD4</td>
<td class="style4 clickme2" style="width: 139px">Active</td>
<td class="style4" style="width: 200px">DataD6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Inactivate</button>
</td>
</tr>
<tr>
<td class="style4" style="width: 139px">DataE1</td>
<td class="style4" style="width: 139px">DataE2</td>
<td class="style4" style="width: 139px">DataE3</td>
<td class="style4" style="width: 139px">DataE4</td>
<td class="style4 clickme2" style="width: 139px">Inactive</td>
<td class="style4" style="width: 200px">DataE6</td>
<td>
<button href="#" id="DataA1" class="action_button" style="width:80px;height:">
Activate</button>
</td>
</tr>
</table>
</td>
</td>
</body>
</html>
The page contains a table with a button at the end of each row. The button has the function of changing the text (that is, when the user clicks a button, the text on the button and col5 swaps as pre-defined).
Clicking "Activate" button changes the button text to "Inactivate" and col5 text to "Active". Also, clicking "Inactivate" button changes the button text to "Activate" and col5 text to "Inactive". The PHP file will print "INACTIVATED" on successful inactivation and "ACTIVATED" on successful activation. I want to change texts and blur when the document gets PHP print data or callback. How can this be possible?
This will work if I understood your intent correctly:
$(function() {
$('.action_button').click(function() {
var $button = $(this);
$.ajax({
type: 'POST',
url: 'action.php',
data: 'id='+ $(this).attr('id'),
cache: false,
success: function(result) {
var $row = $button.closest('tr');
var $col = $row.find('.clickme2');
$row.fadeOut('fast', function() {
if (result == 'ACTIVATED') {
$button.text('Activate');
$col.text('Active');
} else if (result == 'INACTIVATED') {
$button.text('Inactivate');
$col.text('Inactive');
}
}).fadeIn();
}
});
return false;
});
});
You need to put the code that depends on the result to the success callback.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论