Question

我有一个包含多列的表（index.php）。一列是复选框。只要选中该复选框，它就会显示另一列，您可以在其中选择数量。

我希望能够点击一个名为＆＃34; Add to Order＆＃34;并让它使用AJAX将任何选定的行添加到index-order.php页面。完成所有选择后，我希望能够点击＆＃34; Checkout＆＃34;按钮，让我带到index-order.php页面，它应该在表格中显示所有添加的选项。

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

Index.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>

索引order.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是您要获取的列数。

基于选中的复选框通过AJAX发送表行数据

1 个答案: