0

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

例如，在我的表中，我有一个名为Room Allocation的列和另一个名为Action的列。如果行值Room Allocation列设置为 Pending ，那么我希望Action下特定行的按钮是Edit和Cancel，但如果是其他任何东西（即不是 Pending），那么按钮应该是Edit和Decline。

我怎样才能使用 jQuery 来做到这一点？下面是我的代码，我在这里包含了一个小提琴：

<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>
4

1 回答 1

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 完成此操作？

如果您需要更多细节或遇到困难，请告诉我 - 我尚未测试此代码，但它应该没有问题。

于 2013-03-17T13:22:08.870 回答