Question

enter image description here

你能看到这个截图中的输出吗？现在问题是什么。

在左表中，我有两行是动态的。右边我正在输出。

如果我点击左表的第一行，我应该在右侧显示该行的输出。这是有效的。

相同如果我单击左表的第二行，我应该只显示第二行输出，但它显示第一行和第二行输出。它没有隐藏第一行输出。

每次点击多次显示每一行

请帮助我的朋友我是jquery的新手，所以我不知道如何解决这个问题。

我的代码 - index.php

<head>
        <script type="text/javascript">
        $('#table_struct tr').click(function() {
        var $this = $(this);
        var offset = $this.offset();
        var height = $this.height();
        var order_id = $this.data('order_id');

        $.get('getuser.php?order_id=' + order_id, function(table) {
        $('.menu').append(table);
        $('.menu').css({
        right: offset.right,
        top: offset.top+height
        });
        });
        });
        </script>
        </head>
        <body>
        <?php
        session_start();
        include "db.php";
        $query = "select * from purna_orders";
        $result = mysql_query($query);

        $num_rows = mysql_num_rows($result);
        if($num_rows >= 1)
            {

            echo "<div id='showmenu' class='scroll'>";  

        echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
             <tr class='tr_class' bgcolor='white'>
             <td align='center' style='font-weight:bold'> Select </td>
             <td align='center' style='font-weight:bold'> Order Id </td>
             <td align='center' style='font-weight:bold'> Customer Name </td>

             <td align='center' style='font-weight:bold'> Price </td>

             <td align='center' style='font-weight:bold'> Pincode </td>
             <td align='center' style='font-weight:bold'> COD </td>
             <td align='center' style='font-weight:bold'> Status </td>




        </tr>";

            while($row = mysql_fetch_array($result))
            {

                    $order_id = $row['order_id'];
                    $_SESSION['order_id'] = $order_id;
                    echo "<tr height='20' data-order_id='".$row['order_id']."'>
                    <td align='center'><input type='checkbox' class='case' name='case' value='1'></td>
                    <td align='center'>".$row['order_id']."</td>
                    <td align='center'>".$row['customer_name']."</td>

                    <td align='center'>".$row['order_value']."</td>

                    <td align='center'>".$row['bill_to_pincode']."</td>
                    <td align='center'></td>
                    <td align='center'>Ready To Ship</td>";

            echo "</tr>";
                    }
                    echo "</table>";
                    echo "</div>";
                    }


    if(!mysql_close($con))
    {
        echo "failed to close";
    }   

        ?>
        </body>

getuser.php

<?php
    include "db.php";
    $order_id = intval($_GET['order_id']);

    $sql="SELECT * FROM purna_order_items WHERE order_id = '".$order_id."'";
    $result = mysql_query($sql);
    echo "<div style=margin-top:0px; margin-bottom:0px;'>";
    echo "<table border='1' style='background-color:white; font-style:bold;'>
    <tr>
    <td align='center'><b>Increment Id</b></td>
    <td align='center'><b>Po Order Id</b></td>
    <td align='center'><b>Item Sku</b></td>
    <td align='center'><b>Item Name</b></td>
    <td align='center'><b>Item Price</b></td>
    <td align='center'><b>Item Quantity</b></td>
    <td align='center'><b>Item Weight</b></td>
    </tr>";
    while($row = mysql_fetch_array($result)) {
    echo "<tr>";
    echo "<td align='center'>" . $row['order_id'] . "</td>";
    echo "<td align='center'>" . $row['po_id'] . "</td>";
    echo "<td align='center'>" . $row['sku'] . "</td>";
    echo "<td align='center'>" . $row['item_name'] . "</td>";
    echo "<td align='center'>" . $row['item_price'] . "</td>";
    echo "<td align='center'>" . $row['item_quantity'] . "</td>";
    echo "<td align='center'>" . $row['weight'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";
    echo "</div>";
    mysql_close($con);
 ?>

Answer 1

因此，您可以先删除click事件的现有输出，然后添加新记录。

<script type="text/javascript">
    $('#table_struct tr').click(function() {                 
        var $this = $(this);
        var offset = $this.offset();
        var height = $this.height();
        var order_id = $this.data('order_id');

        $.get('getuser.php?order_id=' + order_id, function(table) {
            $('.menu').empty(); // First remove the existing record from DOM
            $('.menu').append(table);
            $('.menu').css({
                right: offset.right,
                top: offset.top+height
            });
        });
    });
</script>

如何在表格行的每次点击中隐藏前一个？

1 个答案: