Javascript 使用会话存储使隐藏的表列/单元格保持可见
我有一个表格,我可以在其中选中复选框,它将记录行中的所有内容。选中复选框后,将显示另一列(Quantity#),其中单元格内有一个文本框/微调器。如果未选中,则相应的文本框/微调器将消失 我希望使用会话存储,以便在刷新过程中检查行直到页面关闭时,能够使Quantity#列中的任何单元格都可见。我可以使用会话存储来保持复选框处于选中状态,但我在使Quantity列保持可见方面遇到问题,只要选中该行的复选框 我该怎么做 我已经包括了复选框行的HTML和保持复选框处于选中状态的JavaScript,以便在需要时可以使用它来根据答案进行选择 复选框和出现的表格单元格的HTML:Javascript 使用会话存储使隐藏的表列/单元格保持可见,javascript,jquery,html,session,checkbox,Javascript,Jquery,Html,Session,Checkbox,我有一个表格,我可以在其中选中复选框,它将记录行中的所有内容。选中复选框后,将显示另一列(Quantity#),其中单元格内有一个文本框/微调器。如果未选中,则相应的文本框/微调器将消失 我希望使用会话存储,以便在刷新过程中检查行直到页面关闭时,能够使Quantity#列中的任何单元格都可见。我可以使用会话存储来保持复选框处于选中状态,但我在使Quantity列保持可见方面遇到问题,只要选中该行的复选框 我该怎么做 我已经包括了复选框行的HTML和保持复选框处于选中状态的JavaScript,以
<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>
$(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;
}
}
});
});
});
使用show()隐藏()?如果复选框被选中?我使用的是类似的东西,每当我选中复选框时,列就会出现…但是,例如,在刷新时,复选框保持选中状态,列就会消失如果你有要显示和隐藏的内容,那么在页面加载时尝试触发它,比如调用所有复选框来检查它们是否被选中,然后显示etcI我不知道该怎么做…你能发布一些大纲,至少让我可以直观地看到它吗?为那些复选框发布呈现的HTML,我可以尝试使用show()hide()?如果复选框被选中?我使用的是类似的东西,每当我选中复选框时,列就会出现…但是,例如,在刷新时,复选框保持选中状态,列就会消失如果你有要显示和隐藏的内容,那么在页面加载时尝试触发它,比如调用所有复选框来检查它们是否被选中,然后显示etcI我不知道该怎么做…你能发布一些大纲,至少让我能直观地看到它吗?发布那些复选框的呈现HTML,我可以试试
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="loc ui-widget-content"><input type="hidden"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>