Adding columns to table via classes jQuery

Question

I think I have been looking at this code too long.

Goal: Add and take away columns from a selected row

I'm almost there with this problem. What's working:

Add columns to selected row ONCE
If column has additional rows and another is selected, remove the columns from the original and add to the new selected
Remove columns from row when re-selected

For example:

Say I select row where ID = 2...the extra columns for that row will display. I then reselect the same row...the extra columns are not removed. But if I select that row again, for a 3rd consecutive time, the extra columns will not display.

I have found that what is causing this is that because of my last if statement, the columns are never re-added.

jQuery

      var lastClicked;
      $(document).ready(function() {
          var tr = $('tbody tr');
          $(tr).each(function () {
              $(this).addClass("notShown");
          });

          $(tr).click(function() {

              var rowID = $(this).attr('id');
              var editRow = "<td><a href='edit?id=" + rowID + "' id='editBtn'>Edit</a></td>";
              var deleteRow = "<td><a id='deleteBtn' onclick='confirmDelete(" + rowID + ")'>Delete</a></td>";

              $(tr).each(function () {
                  if ($(this).hasClass('shown')) {
                      for (var i = 0; i < 2; i++) {
                          $(this).find("td:first-child").remove();
                      }
                      $(this).removeClass("shown").addClass("notShown");
                  }
              });
              if (lastClicked != $(this).attr('id')) {
                  $(this).prepend(editRow);
                  $(this).prepend(deleteRow);
                  $(this).removeClass("notShown").addClass("shown");
              }

              lastClicked = $(this).attr('id');
          });
      });

Did this solve your problem?

Wirde
– Wirde

2015-10-27 11:17:45 +00:00
Commented Oct 27, 2015 at 11:17 — Wirde
– Wirde, Commented Oct 27, 2015 at 11:17
Apologies for not replying. Yes it did, thank you!

wmash
– wmash

2015-10-27 11:41:23 +00:00
Commented Oct 27, 2015 at 11:41 — wmash
– wmash, Commented Oct 27, 2015 at 11:41

Wirde · Accepted Answer · 2015-10-21 12:26:37Z

Im not entierly sure I understand what you are trying to achive but it feels as tough you are approaching this a bit wrong.

Instead of adding and removing columns why not hide and show different content in them?

I have written a short example of what i mean in jsfiddle: https://jsfiddle.net/466ax5jx/2/

You apparently have to write some code to acompany the fiddle so heres the javascript and html that i wrote:

$("table tr").click(function(){
  // To just change current row
  $(this).find("td:last-child > *").toggleClass("hide");

  // To change all rows
  //$(this).parent().find("td:last-child > *").toggleClass("hide");
});

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Info 1</th>
      <th>Info 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hello</td>
      <td><span class="hide">delete</span><span>edit</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Hello</td>
      <td><span class="hide">delete</span><span>edit</span></td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

Adding columns to table via classes jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related