0

How do you alter a value in row to update on load dependant on another row's value?

For example in my table I have a column called Room Allocation and another called Action. If a row value Room Allocation column is set to Pending then I want the buttons for that particular row under Action to be Edit and Cancel but if it is anything else (i.e. not Pending) then the buttons should be Edit and Decline.

How can I go about doing this using jQuery? Here is my code below and I've included a fiddle 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>
2
  • You have to use a listener or do it manually
    – tckmn
    Mar 17, 2013 at 13:08
  • Are you Using Jquery ???
    – Vitthal
    Mar 17, 2013 at 13:10

1 Answer 1

1

How I would approach it depends on a couple of things: 1) what the difference between 'edit' and decline' is, and 2) who the audience is.

First, I assume that 'edit' and 'decline' are separate actions/URL endpoints? That is - the difference is what the button does, not just what the label is?

Next, if your audience is trusted (say, staff using an internal tool), you could include all three buttons in the markup, and show or hide them based on the 'pending' status. This is the easier option, but it won't work if you don't trust your audience.

If you don't trust them, you should never show the buttons to do the incorrect action - if the user has javascript disabled (or purposely disables it), they will be able to send a 'decline' request for rooms/bookings that they shouldn't be able to. In this case, you should create the table on the server, not using javascript/jQuery.

If you let me know that info, I can give you some examples of how to do either option!

Answer for a trusted audience:

OK - here's how to show/hide various buttons based on the status column. We'll use CSS and descendent selectors to do the showing/hiding, which makes the javascript very simple:

Here's the HTML you'll need for each row:

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

And the 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;
}

And finally, the 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...
    }
  });
});

To be honest, if you can make any changes on the server-side (which I hope you can, to make the JS easier as per my example), you can also just have the server create the rows with the correct buttons in the first place. Is there a reason this needs to be done on the client with JS?

Let me know if you need more detail or get stuck - I haven't tested this code, but it should work no problems.

2
  • The target audience is staff who will be using the system for the first time. I am building a room booking system for them. If a booking is pending then staff have the ability to cancel a booking whereas if a booking is allocated then staff have the ability to decline it.
    – methuselah
    Mar 17, 2013 at 13:27
  • I would like to show/hide buttons based on the pending status
    – methuselah
    Mar 17, 2013 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.