2
我有一个带有复选框的列的HTML表格。如果您选中一个复选框，然后按下“签出”按钮，它将采用指定的行并将其显示在电子邮件的正文中。通过会话存储获取所有表格行值
页面加载时会显示前100行。我也有搜索功能，用户可以搜索特定的行。用户可以在不同的搜索中进行操作，并仍然保留所有的复选框与会话存储。但是，当用户点击“Checkout”时，电子邮件的正文仅显示在页面上检查并且当前可见的表格行。
因此，如果用户搜索表格行并检查它，然后导航回到原来的前100行，则该检查行将不会显示在电子邮件中，因为它在当前时刻并未显示在页面上。
我该如何解决这个问题，并显示所有已检查的行，无论它们在页面上是否可见？
我被告知，我将会将复选框存储在会话中，但随后会返回到UI以读取所选项目的列表。但是，我不确定如何解决这个问题，并真的很感谢一些帮助！谢谢！
的JavaScript，其中包括代码保持所有的复选框整个会话检查：
$(function(){
$(':checkbox').each(function() {
// Iterate over the checkboxes and set their "check" values based on the session data
var $el = $(this);
//console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]);
$el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
if ($el.prop('checked')) {
//show the quantity cell in the column under header with class num
$el.closest('tr').find('td.quantity_num').toggle(this.checked);
var quantity = sessionStorage['value_'+$el.prop('id')];
if (quantity) {
$el.closest("tr").find(".spinner").spinner("value", quantity);
}
}
});
$('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');
});
});
的JavaScript将信息发送到邮件正文：
function sendMail() {
var dataItems = [
{ 'clss':'.loc', 'prop':'loc' },
{ 'clss':'.rp-code', 'prop':'rpCode' },
{ 'clss':'.sku', 'prop':'sku' },
{ 'clss':'.special-id', 'prop':'specialId' },
{ 'clss':'.description', 'prop':'description' },
{ 'clss':'.quantity', 'prop':'quantity' },
{ 'clss':'.unit', 'prop':'unit' }
];
var link = "mailto:[email protected]" + "?subject=" + encodeURIComponent("Order") + "&body=";
link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) {
var str = dataItems.map(function(item) {
return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0';
}).join('');
str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '%0D%0A';
return str;
}).join('') + '%0D%0A';
console.log(link);
window.location.href = link;
}
HTML表：
<section id="checkout-btn">
<button id="checkout" name="order" onclick="sendMail(); return false">Checkout</button>
</section>
<br>
<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" data-loc="<?php echo $row['Loc'] ?>"><input type="hidden"><?php echo $row['Loc'];?></td>
<td class="rp-code ui-widget-content" align="center" data-rp-code="<?php echo $row['Rp-Code'] ?>" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td class="special-id ui-widget-content" data-special-id="<?php echo $row['Special-ID'] ?>" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td 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 class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td style="display: none;" class="quantity_num ui-widget-content"><input disabled="true" type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>
编辑：
该功能可显示当行被选中的Quantity #柱：
$(function() {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
setupSpinner(this);
console.log('input - checked: ',$('input.check').is(':checked'));
//var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
});
});
函数微调：
function setupSpinner(checkbox) {
var quantity = $(checkbox).closest('tr').find('td.quantity').data('quantity');
console.log('quantity: ',quantity);
$(checkbox).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;
}
//store value
var test = ui.value;
sessionStorage.setItem('value_'+$(checkbox).prop('id'), JSON.stringify(test));
var testtrue = sessionStorage.getItem('value_'+$(checkbox).prop('id'));
console.log('testtrue: ', JSON.parse(testtrue));
}
});
}
功能，在检查表中的行会从每个单元的值：
$(function() {
$(document).on("click", "#merchTable .check", function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.check').length === 0;
});
var isValid = true;
var errors = '';
var elements = tds;
if (tds.find('td').length > 0) {
elements = tds.find('td');
}
var dict = {};
elements.each(function (index, element) {
var type = $(this).attr('class');
var value = (element.tagName == 'td') ? $(this).val() : $(this).text();
console.log(type);
// ----- Switch statement that provides validation for each table cell -----
switch (type) {
case "loc ui-widget-content":
dict["Loc"] = value;
break;
case "rp-code ui-widget-content":
dict["Rp-Code"] = value;
break;
case "sku ui-widget-content":
dict["SKU"] = value;
break;
case "special-id ui-widget-content":
dict["Special-ID"] = value;
break;
case "description ui-widget-content":
dict["Description"] = value;
break;
case "quantity ui-widget-content":
dict["Quantity"] = value;
break;
case "unit ui-widget-content":
dict["Unit"] = value;
break;
case "quantity_num ui-widget-content":
dict["spinner"] = value;
break;
}
})
if (isValid) {
console.log(dict);
} else {
alert(errors);
}
});
});
在您的电子邮件正文JS函数中，您所做的只是遍历merchTable行以查找当前选中的复选框。除了循环访问实际的merchTable之外，您还需要循环访问sessionStorage中存储的任何内容。如果您的第一个代码示例是您在会话存储中存储的所有内容，则需要对其进行返工以包含构建主体所需的数据。 –
是的，我认为这可能是问题，但我不知道如何修改它。我其实曾试图重做它，但无法提供任何东西。代码的第一部分基本上都保存在会话存储中。我在另一段代码中使用会话存储，但它的另一个功能并正常工作，所以我认为这是唯一需要重写的会话存储代码。 – Rataiczak24