Question

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

例如，在我的表格中，我有一个名为房间分配的列，另一个名为操作。如果行值会议室分配列设置为待定，那么我希望操作下该特定行的按钮为修改和取消，但如果是其他任何内容（即不等待），则按钮应为修改和拒绝。

如何使用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客户端上完成这个？

如果您需要更多细节或卡住，请告诉我 - 我还没有测试过此代码，但它应该没有问题。

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

1 个答案:

回答受信任的受众：