Javascript 根据另一行改变一行中的值'；s值

如何根据另一行的值更改行中的值以在加载时更新

例如，在我的表中，有一列名为房间分配，另一列名为操作。如果行值房间分配列设置为挂起，则我希望操作下该特定行的按钮为编辑和取消，但如果是其他内容（即未挂起）然后按钮应该是编辑和拒绝

我如何使用jQuery来实现这一点？下面是我的代码，其中包括一把小提琴：

模块代码
白天
起始期
长度
房间偏好
房间分配
行动
辅酶A 101
星期二
11:00
2小时
B.1.11
悬而未决的
编辑
取消
COA201
星期一
10:00
1小时
J001
J001
编辑
取消

我将如何处理它取决于两件事：1）“编辑”和“拒绝”的区别是什么，2）观众是谁

首先，我假设“编辑”和“拒绝”是单独的操作/URL端点？也就是说，区别在于按钮的功能，而不仅仅是标签的功能

接下来，如果您的受众是可信的（例如，使用内部工具的员工），您可以在标记中包含所有三个按钮，并根据“挂起”状态显示或隐藏它们。这是一个更简单的选择，但如果你不信任你的听众，它就不会起作用

如果您不信任他们，您永远不应该显示执行错误操作的按钮-如果用户禁用了javascript（或故意禁用），他们将能够发送一个“拒绝”请求，请求他们不应该能够发送的房间/预订。在这种情况下，您应该在服务器上创建表，而不是使用javascript/jQuery

如果你让我知道这些信息，我可以给你一些例子，如何做任何一个选择

对值得信赖的听众的回答： 确定-以下是如何根据状态列显示/隐藏各种按钮。我们将使用CSS和子代选择器进行显示/隐藏，这使得javascript非常简单：

以下是每行所需的HTML：

<tr class="booking">
  <td>COA101</td>
  <td>Tuesday</td>
  <td>11:00</td>
  <td>2 hours</td>
  <td>B.1.11</td>
  <td class="status">Pending</td>
  <td class="action">
    <button class="edit cupid-green">Edit</button>
    <button class="decline cupid-green">Decline</button>
    <button class="cancel cupid-green">Cancel</button>
  </td>
</tr>

最后，jQuery/JS：

$(function(){
  var bookingRows = $('table tr.booking'); //Find all the booking rows

  bookingRows.each(function(){
    var row = $(this); //Stash a reference to the row

    //If you can add a class of 'pending' to the status <td>, this becomes even cleaner and nicer...
    if (row.find('td.status').text().toLowerCase() == 'pending') { //Check the contents of the status column
      row.addClass('pending'); //Add a class to the row so the CSS can do its thing...
    }
  });
});

$（函数（）{
var bookingRows=$（'table tr.booking'）；//查找所有预订行
bookingRows.each（函数（）{
var row=$（this）；//隐藏对该行的引用
//如果您可以在状态中添加一个“挂起”类，这将变得更干净、更好。。。
如果（row.find（'td.status'）.text（）.toLowerCase（）=='pending'）{//检查status列的内容
row.addClass（'pending'）；//向该行添加一个类，以便CSS能够完成它的任务。。。
}
});
});

老实说，如果您可以在服务器端进行任何更改（我希望您可以这样做，以便按照我的示例简化JS），那么您也可以让服务器首先使用正确的按钮创建行。有没有理由需要在使用JS的客户端上执行此操作

---

如果您需要更多详细信息或遇到问题，请告诉我-我尚未测试此代码，但它应该可以正常工作。

您必须使用侦听器或手动执行此操作。您是否使用Jquery？？？目标受众是将首次使用系统的员工。我正在为他们建立一个房间预订系统。如果预订处于挂起状态，则员工可以取消预订，而如果预订已分配，则员工可以拒绝预订。我想根据挂起状态显示/隐藏按钮

/* Don't show the cancel button for normal rows, or the decline button for pending rows */
tr.booking button.cancel,
td.booking.pending button.decline {
  display: none;
}
/* When the row is pending, show the cancel button */
tr.booking.pending button.cancel{
  display: inline-block;
}

$(function(){
  var bookingRows = $('table tr.booking'); //Find all the booking rows

  bookingRows.each(function(){
    var row = $(this); //Stash a reference to the row

    //If you can add a class of 'pending' to the status <td>, this becomes even cleaner and nicer...
    if (row.find('td.status').text().toLowerCase() == 'pending') { //Check the contents of the status column
      row.addClass('pending'); //Add a class to the row so the CSS can do its thing...
    }
  });
});