[英]Get All Table Row Values when Checked
我有一個多列表,其中一列是復選框。 如果選中一個復選框,則按“結帳”按鈕,它將獲取指定的行並將其顯示在電子郵件正文中。
我最初引入前100行來保持用戶的信息最小化。 我還有一個搜索功能,用戶可以搜索特定的行。 雖然您可以在不同的搜索中進行操作,並且仍然使用會話存儲檢查所有復選框,但當您點擊“結帳”時,它僅顯示已檢查且當前在頁面上可見的表格行。
因此,如果我搜索了一個表行並檢查了它,但是然后通過單擊home返回到原來的前100行,那么該行將不會顯示在電子郵件中,因為它沒有顯示在前100行中。
如何修復此問題並顯示已檢查的所有行,無論它們是否在頁面上可見?
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 type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>
將數據從表格引入電子郵件的JavaScript:
function sendMail() {
var link = "mailto:me@example.com"
+ "?subject=" + encodeURIComponent("Order")
+ "&body=";
var body = '';
$('table tr input[name="check"]:checked').each(function(){
var current_tr = $(this).parent().parent();
var data = current_tr.find('.loc').data('loc');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.rp-code').data('rp-code');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.sku').data('sku');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.special-id').data('special-id');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.description').data('description');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.quantity').data('quantity');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.unit').data('unit');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.spinner').data('spinner');
body += encodeURIComponent(data) + '\xa0\xa0';
body += '%0D%0A';
});
body += '';
link += body;
console.log(link);
window.location.href = link;
}
用於在整個會話期間保持選中復選框的JavaScript:
$(function(){
$(':checkbox').each(function() {
var $el = $(this);
$el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
});
$('input:checkbox').on('change', function() {
var $el = $(this);
sessionStorage[$el.prop('id')] = $el.is(':checked');
});
});
部分答案 - 評論太久了
從您之前的問題中 ,我們了解每個選中的行都有一個quantity_num
輸入,並且您希望其用戶輸入的值與固定行數據, loc
, rp-code
等一起包含在電子郵件正文中。
看來sessionStorage只保存行的已檢查狀態,而不是quantity_num
值。 如果是這樣,那么分頁指示quantity_num
值僅對當前顯示的行可用 - 對於所有其他行,您只知道已檢查行的id,而不是其quantity_num
值。
因此,首先要確保存儲“id | quantity_num”對(在sessionStorage中)。 其他數據, loc
, rp-code
等與id
相關聯,並且可以從服務器檢索並且可以在客戶端或(優選地)服務器端使用以組成電子郵件主體。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.