根据另一行的值更改一行中的值

Question

如何更改行中的值以根据另一行的值更新负载？

例如，在我的表格中，我有一个名为 Room Allocation 的列和另一个名为 Action 的列。如果行值 Room Allocation 列设置为 Pending，那么我希望 Action 下该特定行的按钮为 Edit 和 取消，但如果是其他任何内容（即未挂起），则按钮应为编辑和拒绝。

我怎样才能使用 jQuery 来做这件事？下面是我的代码，我已经包含了一个小提琴here：

<table id="home_tbl">
    <thead>
      <tr>
        <th>Module Code</th>
        <th>Day</th>
        <th>Start Period</th>
        <th>Length</th>
        <th>Room Preference</th>
        <th>Room Allocation</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>

    <!-- dummy data starts here -->

      <tr>
        <td>COA101</td>
        <td>Tuesday</td>
        <td>11:00</td>
        <td>2 hours</td>
        <td>B.1.11</td>
        <td>Pending</td>
        <td><button class="cupid-green">Edit</button>
          &nbsp;
          <button class="cupid-green">Cancel</button></td>
      </tr>
            <tr>
        <td>COA201</td>
        <td>Monday</td>
        <td>10:00</td>
        <td>1 hours</td>
        <td>J001</td>
        <td>J001</td>
        <td><button class="cupid-green">Edit</button>
          &nbsp;
          <button class="cupid-green">Cancel</button></td>
      </tr>

      <!-- dummy data ends here -->

    </tbody>
  </table>

Answer 1

我将如何处理它取决于几件事：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>

还有 CSS：

/* 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;
}

最后，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...
    }
  });
});

说实话，如果您可以在服务器端进行任何更改（我希望您可以这样做，按照我的示例使 JS 更容易），您也可以让服务器使用正确的按钮创建行首先。是否有理由需要在客户端使用 JS 完成此操作？

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