У меня есть HTML-файл, как показано ниже.
<!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:">
Activate</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>
Страница содержит таблицу с кнопкой в конце каждой строки. Кнопка имеет функцию изменения текста (то есть, когда пользователь нажимает кнопку, текст на кнопке и col5 меняются местами, как предопределено).
Нажатие кнопки «Активировать» изменяет текст кнопки на «Деактивировать», а текст col5 на «Активный». Кроме того, нажатие кнопки «Деактивировать» изменяет текст кнопки на «Активировать», а текст col5 на «Неактивно». В файле PHP будет напечатано «INACTIVATED» при успешной инактивации и «ACTIVATED» при успешной активации. Я хочу изменить текст и размыть, когда документ получает данные печати PHP или обратный вызов. Как это может быть возможно?