【发布时间】：2021-08-18 23:11:21
【问题描述】：
我有一个显示来自数据库的数据的 HTML 表。 [status] 列将每条记录的状态显示为“AVAILABLE”、“BOOKED”或“ON-HOLD”。表的最后一列是 [ACTION] 列，其中包含一个 BUTTON。如果 row 的状态 =“Available”，则按钮文本应为“BOOK”。同样，如果状态 =“BOOKED”或“ON-HOLD”，则按钮文本应为“VIEW”。我已经通过 jquery 成功应用了 css，它根据上面提到的单元格中的文本更改状态列的背景颜色，但相同的代码不适用于按钮文本。
HTML
<tr id="data_row">
<td class="align-middle text-center"><?php echo $Project; ?></td>
<td class="align-middle text-center"><?php echo $Sector; ?></td>
<td class="align-middle text-center"><?php echo $Category ;?></td>
<td class="align-middle text-center"><?php echo $Plot_title ;?></td>
<td class="align-middle text-center"><?php echo $App_date ;?></td>
<td class="align-middle text-center"><?php echo $Customer ;?></td>
<td class="align-middle text-center" id= "status"><?php echo $Status ;?></td>
<td class="align-middle text-center">
<button type="button" name="edit" id="<?php echo $Plot_ID; ?>" class="btn btn-outline-primary btn-sm edit_data" data-toggle="modal" data-target="#modalform" data-backdrop="static" data-keyboard="false">Book</button>
</td>
</tr>
jQuery
$('#myTable tr#data_row td#status').each(function () {
switch ($(this).text()) {
case "Booked":
$(this).css({"background-color":"#eeac88", "color":" #7a3b2e"}); // (WORKING FOR CSS)
$(".edit_data").text("View"); // (NOT WORKING FOR TEXT CHANGE)
break;
case "on-Hold":
$(this).css("background-color","#fefbd8");
$(".edit_data").text("View");
break;
default:
$(this).css({"background-color": "#c5d5c5", "color":"green"});
$(".edit_data").text("Book");
break;
}
});
【问题讨论】：
-
您需要解决的第一件事是页面中不能有重复的 ID。它们就像一个地址，并且根据定义是唯一的
-
那么你需要获取当前行中的那个。
$(this).closest('tr').find('.edit_data').doSomething() -
工作就像一个魅力。我替换了您评论中的代码。你说唯一ID。你的意思是 ID=STATUS ？我是 JQuery 的新手。你能否详细说明我在我的知识中缺少什么。有义务。
-
$(".edit_data").text("Book");对整个页面中的每个匹配选择器执行相同的操作。转到最近的行并在该行中找到该行只会影响该特定实例 -
好的。这就说得通了。我需要了解有关 JQuery Traversing 的更多信息。感谢您的支持。
标签： html jquery css events dynamic