检查时获取所有表格行值 [英] Get All Table Row Values when Checked
问题描述
我有一个多列表格，其中一列是复选框。如果你勾选了一个复选框，然后按下Checkout按钮，它将采用指定的行并将它们显示在电子邮件的正文中。
我原本带上顶部100行以将信息保持为用户的最小值。我也有搜索功能，用户可以搜索特定的行。尽管您可以在不同的搜索中进行操作，并且仍然保持所有复选框都被会话存储检查，但是当您点击Checkout时，它只会显示在页面上检查并且当前可见的表格行。
因此，如果我搜索了一个表格行并对其进行了检查，然后通过单击回到原来的前100行，那么该行将不会显示在电子邮件中，因为它不会显示在顶部100％。
如何解决这个问题并显示所有已检查的行，无论它们在页面上是否可见？
HTML：
< section id =checkout-btn>
< button id =checkoutname =orderonclick =sendMail（）; return false> Checkout< / button>
< / section>
< br>
< table id =merchTablecellspacing =5class =sortable>
< thead>
< tr class =ui-widget-header>
< th class =merchRow>报告代码< / th>
< th class =merchRow> SKU< / th>
< th class =merchRow>特殊ID< / 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 =checkboxclass =checkname =checkid =checkid-<？php echo intval（$ row [ 'ID']）>？>< / TD>
< td class =loc ui-widget-contentdata-loc =<？php echo $ row ['Loc']？>>< input type =hidden> <？php echo $ row ['Loc'];？>< / td>
< td class =rp-code ui-widget-contentalign =centerdata-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-contentdata-sku =<？php echo $ row ['SKU']？> id =sku-<？php echo intval（$ row ['SKU']）？>><？php echo $ row ['SKU'];？>< / td>
< td class =special-id ui-widget-contentdata-special-id =<？php echo $ row ['Special-ID']？>我们可以通过这种方式来创建一个特定的标识符，这个标识符是一个特定的标识符。 ？>< / TD>
< td class =description ui-widget-contentdata-description =<？php echo htmlspecialchars（$ row ['Description']）？> id =description-<？php echo intval（$ row ['Description']）？>><？php echo $ row ['Description'];？>< / td>
< td class =quantity ui-widget-contentdata-quantity =<？php echo $ row ['Quantity']？>我们可以通过下面的例子来说明如何使用数据库中的数据：['Quantity'];>><？php echo $ row ['Quantity'];？>< TD>
< td class =unit ui-widget-contentdata-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 =textboxstyle =width：100px; class =spinnerid =spin-<？php echo intval（$ row ['ID']）？>>< / td>
< / tr>
<？php}？>
< / tbody>
< / table>
将表格中的数据导入电子邮件的JavaScript：
函数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\\ （'。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：
$ b $
$（function（）{
$（'：checkbox'）。each（function（）{
var $ el = $（this）;
$ el.prop（'checked'，sessionStorage [$ el.prop（'id'）] ==='true'）;
}）; $ b $ （'input'：checkbox'）。on（'change'，function（）{
var $ el = $（this）;
sessionStorage [$ el.prop（'id '）] = $ el.is（'：checked'）;
}）;
}）;
部分答案 - / em>
从您的早期问题，我们了解到每个已检查的行都有 quantity_num 输入，并且您希望其用户输入的值与固定行数据 loc ， rp-code 等等。
看来sessionStorage只保存行，而不是 quantity_num 值。如果是这样，那么分页规定 quantity_num 值仅适用于当前显示的行 - 对于所有其他行，您只知道检查行的标识，而不是它们的<$ c
因此，首先要确保存储id | quantity_num对（在sessionStorage中）。其他数据 loc ， rp-code 等与 id ，并且可以从服务器中检索并用于客户端或（最好）服务器端编写电子邮件正文。
I have a multiple column table with one column being checkboxes. If you check a checkbox then press the "Checkout" button, it will take the specified rows and display them in the body of an email.
I originally bring in the top 100 rows to keep the info to a minimum for the user. I also have a search functionality where the user can search for specific rows. While you can maneuver throughout different searches and still keep all of the checkboxes checked with session storage, when you hit "Checkout" it only displays the table rows that are checked and currently visible on the page.
So, if I searched for a table row and checked it, but then went back to the original top 100 rows by clicking home, then that row would not display on the email because it is not displayed in the top 100.
How can I fix this and show ALL rows that have been checked, whether they are visible on the page or not?
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 that brings in data from table to email:
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 for keeping checked checkboxes, checked, throughout the session:
$(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');
});
});
Partial answer - too long for comment
From your earlier question, we understand that each checked row has a quantity_num input and that you want its user-entered value to be included in the email body alongside the fixed row data, loc, rp-code etc.
It appears that sessionStorage holds only the checked state of the rows, not the quantity_num value. If so, then pagination dictates that quantity_num value is only available for currently displayed rows - for all other rows, you know only the id of the checked rows, not their quantity_num value.
Therefore, the first thing to do is to ensure that "id|quantity_num" pairs are stored (in sessionStorage). Other data, loc, rp-code etc. is associated with the id and can be retrieved from the server and used either client-side or (preferably) server-side to compose the email body.
这篇关于检查时获取所有表格行值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
