我有一个包含多列的表(index.php)。一列是复选框。每当选中该复选框时,它会显示另一列,您可以在其中键入文本框中的数量或使用javascript微调器。
完成所有选择后,我希望能够点击" Checkout"按钮,让我带到index-order.php页面,它应该显示在表格中选中复选框的所有表格行。
如何将选定的行添加到index-order.php页面并显示它们?
Index.php代码:
<form name="form1" id="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</div>
</div>
<br>
<div id="my-div2" class="ui-widget">
<div class="ui-widget"> <!-- Div that creates styling for table -->
<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"><input type="hidden"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" 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 name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</form>
<div id="log"></div>
索引order.php:
<?php
$host="xxxxx";
$dbName="xxxxxx";
$dbUser="xxxxxxxxxxxx";
$dbPass="xxxxx";
$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$loc = $_POST['Loc'];
$repcode = $_POST['Rp-Code'];
$sku = $_POST['SKU'];
$specialid = $_POST['Special-ID'];
$description = $_POST['Description'];
$quantity = $_POST['Quantity'];
$unit = $_POST['Unit'];
// I have both of these queries. Not sure which one is the right route?
$query = "SELECT CAST(Loc as INT) as Loc, CAST([Rp-Code] as INT) as [Rp-Code], SKU, [Special-ID], Description, CAST(Quantity as INT) as Quantity, Unit FROM Merchandising ORDER BY Description";
$query = "SELECT $loc, $repcode, $sku, $specialid, $description, $quantity, $unit FROM Merchandising ORDER BY $description";
?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
</tr>
<?php
foreach ($dbh->query($query) as $row) {
?>
<tr align="center">
<td><?php echo $row['Loc']; ?></td>
<td><?php echo $row['Rp-Code']; ?></td>
<td><?php echo $row['SKU']; ?></td>
<td><?php echo $row['Special-ID']; ?></td>
<td><?php echo $row['Description']; ?></td>
<td><?php echo $row['Quantity']; ?></td>
<td><?php echo $row['Unit']; ?></td>
</tr>
<?php
}
?>
</table>
JavaScript的:
$(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;
}
})
if (isValid) {
console.log(dict);
var request = $.ajax({
type: "POST",
url: "index-order.php",
data: dict
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
});
} else {
alert(errors);
}
});
});