vendredi 26 mai 2017

Keep Hidden Table Column/Cells Visible Using Session Storage

I have a table where I can check a checkbox and it will log all of the contents in the row. Once you check a checkbox, another column (Quantity #) appears with a textbox/spinner inside the cell. If it is unchecked, then the corresponding textbox/spinner disappears.

I want to use session storage to be able to keep any cells in the Quantity # column visible if the row is checked throughout refreshes until the page is closed. I was able to use session storage to keep the checkboxes checked, but am having a problem with getting the Quantity # column to remain visible so long as the checkbox is checked for that row.

How can I do this?

I have included the HTML for the checkbox row and the JavaScript that keeps the checkboxes checked so it can be used to base an answer off of if needed.

HTML for the checkbox and the appearing table cell:

<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="quantity_num ui-widget-content" name="rows[0][0][quant]" style="display: none;"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>

JavaScript for the session storage for the checkbox and for the spinner in the appearing table cell:

$(function(){
    $(':checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        // save the individual checkbox in the session inside the `change` event, 
        // using the checkbox "id" attribute
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});


$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'));
    var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
        console.log(quantity);

  if($('input.check').is(':checked'))
    $(this).closest('table').find('th.num').toggle(true);
    else
    $(this).closest('table').find('th.num').toggle(false);



    $(this).closest("tr").find(".spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > quantity ) {
          $( this ).spinner( "value", quantity );
          return false;
        } else if ( ui.value <= 1 ) {
          $( this ).spinner( "value", 1 );
          return false;
        }
      }
    });
  });
  });




Aucun commentaire:

Enregistrer un commentaire