如何用jQuery将div#righttop中的PHP数据传递到div#rightbot？

Alright, let's tackle this problem. You want to copy the current content of div#righttop (which gets modified by another button) to div#rightbot when the Add button is clicked. Here's a straightforward solution using jQuery:

First, let's recap your existing code for context: #

HTML Code #

<div class="right"> 
  <h2>Product Detail</h2> 
  <div id="righttop"></div> 
  <button id="Add">Add</button> 
</div> 
<div class="rightbot"> 
  <h2>Shopping Car</h2> 
  <div id="rightbot"></div> 
</div>

PHP Code #

mysqli_select_db($con,"products"); 
$sql="SELECT product_id, product_name, unit_price, unit_quantity, in_stock FROM products WHERE product_id = '" . $productid . "'"; 
$result = mysqli_query($con,$sql); 
echo "<table>"; 
echo "<th>Product Name</th>"; 
echo "<th>Unit Price</th>"; 
echo "<th>Unit Quantity</th>"; 
echo "<th>In Stock</th>"; 
while($row = mysqli_fetch_array($result)) { 
  echo "<tr id='detail'>"; 
  echo "<td>" . $row['product_name'] . "</td>"; 
  echo "<td>" . $row['unit_price'] . "</td>"; 
  echo "<td>" . $row['unit_quantity'] . "</td>"; 
  echo "<td>" . $row['in_stock'] . "</td>"; 
  echo "</tr>"; 
} 
echo "</table>"; 
echo isset($_POST['detail']) ? $_POST['detail'] : ''; // Added a check to avoid errors
mysqli_close($con); 
?>

jQuery Solution #

First, make sure you've included the jQuery library in your page (either via CDN or local file). Then add this script to your page (preferably right before the closing </body> tag, or wrapped in $(document).ready()):

$(document).ready(function() {
  // Bind click event to the Add button
  $('#Add').click(function() {
    // Get the current HTML content inside #righttop
    const productContent = $('#righttop').html();
    
    // Append the content to #rightbot (use .html() instead to overwrite existing content)
    $('#rightbot').append(productContent);
    
    // Optional: Clear #righttop after adding to cart
    // $('#righttop').empty();
  });
});

Breakdown of the code: #

• $(document).ready(): Ensures the script runs only after the entire DOM has loaded, so we don't try to bind events to elements that don't exist yet.
• $('#Add').click(...): Listens for clicks on the Add button with ID Add.
• $('#righttop').html(): Grabs all the current HTML content inside #righttop (including the dynamic product table loaded by your PHP).
• $('#rightbot').append(productContent): Adds the product content to the end of the shopping cart div. If you want to replace the existing cart content instead of adding to it, replace append() with html().
• The optional empty() line: If you want to clear the product detail area after adding to the cart, uncomment this line.

Quick Notes: #

1. jQuery Inclusion: If you haven't added jQuery yet, put this in your <head> section:

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   

2. Dynamic Content Safety: Since #righttop's content is modified dynamically, this solution still works because we're fetching the content at the time of the click, not on page load.
3. PHP Error Fix: I added a check for $_POST['detail'] in your PHP code to prevent a "Undefined index" notice if that parameter isn't sent.

内容的提问来源于stack exchange，提问作者wayne cen