选中了通过 AJAX 发送表行数据复选框

Question

我有一个包含多列的表(index.php(。一列是一个复选框。每当选中该复选框时，它都会显示另一列，您可以在其中选择数量。

我希望能够点击一个名为"添加到订单"的按钮，并让它使用 AJAX 将任何选定的行添加到索引顺序.php页面。完成所有选择后，我希望能够单击"结帐"按钮并让它将我带到索引顺序.php页面，它应该在表格中显示所有添加的选择。

我知道如何导航到索引顺序.php页面，所以我的主要问题是如何在使用 ajax 时将所选行添加到页面并在这样做时停留在当前页面上？

索引.php代码：

<form name="form1" action="index-order.php"> 
<section id="checkout-btn"> 
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php"> 
<section id="addToOrder">   
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>

<div id="my-div2" class="ui-widget">
<div class="ui-widget">
<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"></td>
        <td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?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" name="value" id="test"></td>
    </tr>
    <?php } ?>
    </tbody>
</table>
</div>
</div>
</form>

索引顺序.php：

<?php if(isset($_POST['rows'])): ?>
<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>
        <th>Quantity #</th>
    </tr>
    <?php 
        foreach($_POST['rows'][0] 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>
            <td><?php echo $row['quant']; ?></td>
        </tr>
    <?php 
        endforeach; 
    ?>
</table>
<?php endif; ?>

JavaScript(显然需要一些工作。发布我到目前为止所拥有的(：

$(function () {
  $('#form2').on('submit', function (e) {
  if($('input.check').is(':checked')) {
      $(this).closest('tr');
      e.preventDefault();
      var request = $.ajax({
        type: 'post',
        url: 'index-order.php',
        data: $('#form2').serialize(),
        success: function(){
            alert('success');
        },
        error: function(){
            alert('failure');
        }
      });
}
});
});

Answer 1

您可以做的是获取当前选中复选框的所有同级，并在此基础上获取所有列并分离数据以最终通过 ajax 发送。

你可以做这样的事情：

$('#form2').on('submit', function (e) {
    $checkbox = $(this).find('input.check:checked').parent('td'); //Finds the checked checkbox's column inside #form2
    $otherColumns = $checkbox.nextAll(); //Gets all the siblings
});

上面的代码将为您提供表单内选中复选框旁边的所有其他列。您接下来要做的是穿越$otherColumns并使用$otherColums.eq(n).html()获取每个单独的值，其中 n 是您尝试获取的列号。