我需要以下代码的帮助。有 2 种样式:activatedRow
和 disactivatedRow
。当用户单击按钮(位于表的 TD 内)时,activatedRow
或disactivatedRow
将应用于行。样式的选择基于当前样式。例如,如果激活了一行,则按钮将停用它,反之亦然。
所以,我对AJAX success
有问题.如何编写IF语句来检查行的当前样式?
附言知道如何更改停用和激活行的TD IMG(按钮)也会很有趣。
.CSS
.activatedRow td {
background-color:#FFFFFF !important;
color: #000000 !important;
}
.disactivatedRow td {
background-color:#DFE1ED !important;
color: #9896A8 !important;
}
函数 "disactivateRow()"
<script type="text/javascript">
function disactivateRow(flightNum,obj){
$.ajax({
type: "POST",
url: "callpage.php?page=tables/disactivate.php",
data: "flightNum=" + flightNum,
success: function(){
if ($(obj).hasClass("activatedRow")) {
$(obj).removeClass("activatedRow").addClass("disactivatedRow");
} else
$(obj).removeClass("disactivatedRow").addClass("activatedRow");
}
});
}
</script>
表格内的按钮
<table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
<thead>
<tr>
<th scope="col">Flt Num</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach ($result1 as $row):
$flightNum=$row['flightNum'];
?>
<tr id="<?php echo $flightNum; ?>" class="edit_tr">
<td><?php echo $flightNum;?></td>
<td id="<?php echo $flightNum; ?>">
<div onclick='disactivateRow("<?php echo $flightNum; ?>", this)'>
<img src='images/disactivate.png' alt='Disactivate' />
</div>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
jQuery DataTable 激活
$(document).ready(function(){
$('#newspaper-b').dataTable({
"sPaginationType":"full_numbers",
"bJQueryUI":true,
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[0] == "0") {
nRow.className = "disactivatedRow";
} else
nRow.className = "activatedRow";
return nRow;
}
});
答:
它现在可以工作:
$(".disact_but" ).click(function() {
var ID=$(this).attr('id');
$.ajax({
type: "POST",
url: "callpage.php?page=tables/disactivate.php",
data: "flightNum=" + ID,
success: function(){
$("#"+ID).toggleClass("disactivatedRow", 100);
}
});
return false;
});
obj
TD 是应用样式的 TD,因为您的代码指示您可以使用toggleClass
在匹配元素集中的每个元素中添加或删除一个或多个类,具体取决于类的存在或 switch 参数的值。
$(obj).closest('tr').toggleClass('disactivatedRow');
$(obj).closest('tr').toggleClass('activatedRow');
编辑
根据您添加的新信息,obj
是一行的子项。 closest
方法应该为您提供适当的tr
然后我们可以应用toggleClass