0
所以我有一個表，你可以檢查錶行，它會得到該行中每個單元格的值，也顯示名爲Quantity #另一列。 Quantity #列包含type="number"輸入。輸入數字後，用戶將能夠刷新頁面，並且輸入的值將保持可見。用戶也可以點擊「簽出」按鈕，並將該數據發佈到電子郵件正文。功能可以運行在Chrome/Safari瀏覽器而不是Firefox的
這一切都在Safari和谷歌Chrome的偉大工程。但是，在Firefox中，如果您在輸入中輸入一個值然後再刷新，則該值將不再位於輸入中。另外，如果您點擊Checkout按鈕並將數據粘貼到電子郵件中，它將不會像Safari/Chrome中那樣粘貼輸入值。
這是爲什麼，我能做些什麼來解決在Firefox這個問題呢？
的JavaScript：
$(function($) {
var RowData = (function(storage, storageKey) {
var rowData = readFromSession();
var dataItems = ['loc', 'rp-code', 'sku', 'special-id', 'description', 'quantity', 'unit'];
var emailDelimiters = {
'row': '%0D%0A',
'dataItem': '\xa0\xa0'
};
function readFromSession() {
return JSON.parse(storage.getItem(storageKey) || '{}');
}
function writeToSession() {
storage.setItem(storageKey, JSON.stringify(rowData));
}
function writeRow(tr) {
var $tr = $(tr),
id = $tr.prop('id');
if($tr.find('.check').is(':checked')) {
rowData[id] = {};
for(var i=0; i<dataItems.length; i++) {
rowData[id][dataItems[i]] = $tr.find('.' + dataItems[i]).text();
}
rowData[id].quantity_num = $tr.find('.spinner').val();
} else {
delete rowData[id];
}
writeToSession();
}
function readRow(tr) {
// restore tr's checkbox and spinner value from stored data
var $tr = $(tr),
id = $tr.prop('id'),
row = rowData[id];
if(row) {
$tr.find('.check').prop('checked', true).end()
// .find('.spinner').spinner('value', row.quantity_num); // if using spinner widget
.find('.spinner').val(row.quantity_num); // if using HTML5 <input type="number">
}
}
function toEmailString() {
return $.map(rowData, function(row, id) {
return $.map(row, window.encodeURIComponent).join(emailDelimiters.dataItem);
}).join(emailDelimiters.row);
}
// selectively expose functions as methods of RowData
return {
'writeRow': writeRow,
'readRow': readRow,
'toEmailString': toEmailString
};
})(window.sessionStorage, 'checkedRowData');
$('#merchTable').on('change', '.check', function() { // on changing a table row ...
RowData.writeRow($(this).closest('tr').get(0)); // ... set the corresponding row object in RowData and sessionStorage
}).on('blur', '.spinner', function() { // on leaving a spinner widget
RowData.writeRow($(this).closest('tr').get(0));
});
$('#checkout').on('click', function() { // on clicking the [Checkout] button
var link = "mailto:[email protected]" + "?subject=" + encodeURIComponent("Order") + "&body=" + RowData.toEmailString();
console.log(link);
window.location.href = link;
});
// Call this function on completion of every pagination/search
function restoreVisibleRows() {
$('#merchTable tbody tr').get().forEach(RowData.readRow);
}
restoreVisibleRows();
});
的JavaScript不斷刷新顯示的輸入值和數量＃柱：
$(function(){
var showQuantityHeader = false;
$(':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);
showQuantityHeader = true;
//setupSpinner(this);
var quantity = sessionStorage['value_'+$el.prop('id')];
}
});
if (showQuantityHeader) {
$('#merchTable').find('th.num').show();
//console.log('header with class num: ',$('#merchTable').find('th.num'));
}
$('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');
console.log($el);
});
});
HTML：
<section id="checkout-btn">
<button id="checkout" name="order">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 id="<?php echo intval ($row['ID'])?>">
<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="number" min="1" max="<?php echo $row['Quantity'];?>" step="1" style="width: 100px;" class="spinner" /></td>
</tr>
<?php } ?>
</tbody>
</table>
編輯： 
FireFox會給出任何控制檯錯誤嗎？ – samanime
我編輯了錯誤截圖 – Rataiczak24
這些是與CSS相關的錯誤。有沒有JavaScript錯誤？ – str