0

別の行の値に応じて負荷を更新するために、行の値をどのように変更しますか？

たとえば、私のテーブルには、RoomAllocationという列とActionという別の列があります。行の値[部屋の割り当て]列が[保留中]に設定されている場合、[アクション]の下のその特定の行のボタンを[編集]と[キャンセル]にしますが、それ以外の場合（つまり、[保留中]でない場合）、ボタンは[編集]と[拒否]にする必要があります。

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）聴衆が誰であるかという2つのことに依存します。

まず、「編集」と「拒否」は別々のアクション/ URLエンドポイントだと思いますか？つまり、違いは、ラベルが何であるかだけでなく、ボタンが何をするかです。

次に、オーディエンスが信頼できる場合（たとえば、内部ツールを使用しているスタッフ）、マークアップに3つのボタンすべてを含め、「保留中」のステータスに基づいてボタンを表示または非表示にすることができます。これは簡単なオプションですが、視聴者を信頼しないと機能しません。

それらを信頼しない場合は、誤ったアクションを実行するためのボタンを表示しないでください。ユーザーがjavascriptを無効にしている（または意図的に無効にしている）場合、ユーザーは部屋/予約に対して「拒否」リクエストを送信できます。できないはずです。この場合、javascript / jQueryを使用せずに、サーバー上にテーブルを作成する必要があります。

その情報を教えていただければ、どちらのオプションを実行する方法の例もいくつか挙げることができます。

信頼できる聴衆への回答：

OK-ステータス列に基づいてさまざまなボタンを表示/非表示にする方法は次のとおりです。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 に答える