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