Javascript 使用JQuery/Ajax将所选表行转到下一页

我有一个包含多列的表（index.php）。一列是复选框。无论何时选中该复选框，它都会显示另一列，您可以在其中在文本框中键入数量或使用javascript微调器

完成所有选择后，我希望能够单击“签出”按钮，并让它将我带到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>

---

为什么不将选中/选中的表行数据序列化为json对象，将其字符串化，保存在会话存储中，然后在签出页面上通过解析json存储对象重新呈现一个包含所有选中项的表呢？这些可能会有帮助：听起来像是可以工作的，但我不确定我该怎么做。另一个选项是将产品id/sku和数量存储在会话存储或php会话存储中，然后使用这些数据在签出页面上加载表。现在，每当我选中复选框，它将从console.log代码行向我显示控制台中相应行的表信息……因此它将获取值，只需将它们显示在另一页的表中即可

<?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>

$(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);
    }
});
});