根据每个表格行中的单元格值更改按钮文本 - Jquery

Posted 2023-03-25

【中文标题】根据每个表格行中的单元格值更改按钮文本 - Jquery

【英文标题】：Change button text based on cell value in each table row - Jquery

【发布时间】：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 的更多信息。感谢您的支持。

【参考方案1】：

试试

$(".edit_data").hmtl("View");

或者在按钮内放置一个<span> 以使用 .text() 方法访问它

【讨论】：

这将改变表中的所有内容，并且与使用 text()

html() 和 val() 将不起作用，因为未使用按钮元素和输入。加上 也不起作用。

如果循环出现问题，那么 CSS 也将不起作用，但 CSS 会根据单元格中包含的值正确地为每个单元格着色。