Adding columns to table via classes jQuery

258
November 22, 2016, at 4:15 PM

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');
          });
      });
Answer 1

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>
READ ALSO
MultiSelect using Jquery is not working

MultiSelect using Jquery is not working

I am using This Jquery Multi Select but while using it it gives me error for $(. .

418
Jquery focus in/out chain event

Jquery focus in/out chain event

I have multiple input boxes, the 2 I'm testing it on are #StartTime and #EndTime.

334
Validation gets removed after calling event.preventDefault()

Validation gets removed after calling event.preventDefault()

Validation gets removed from SSN textbox after calling event. preventDefault(); in $("form").

172