如何使用 jquery change() 更新行状态并显示在相应的表中答案

【问题标题】：How to update row status with jquery change() and display in respective table如何使用 jquery change() 更新行状态并显示在相应的表中
【发布时间】：2025-12-18 01:35:01
【问题描述】：

在使用 <select> 标签更改表中特定行的状态时，我面临着重大问题。

我正在使用 jquery-Ajax，所以，当点击任何特定行上的 <select 时，这里的功能就可以了，例如：假设我已将 id 2 的表行的状态从 Pending 更改为 Delivered。在这个jquery change() 事件触发时，它从'tag' 中获取值并通过ajax 将值发送到其他文件。直到这里一切正常，数据通过 ajax 并且具有特定 id 状态的行正在成功更新。

但在前端它不会改变特定行的状态。但它只改变第一行的状态。

这里我需要它来改变特定行的状态。

注意：我已经在 * 中搜索过这个问题。但那些回答并没有接近我的问题。以下是Link 1 link2 link3下方的链接@

提前致谢

这是输出，我也在图片中解释了细节

有完整代码

HTML 页面：index.php

 <?php
    include('processing.php');
    $newobj = new processing();
?>
<html>
    <head>
        <title>Jquery Ajax select <tag> with PHP Mysql</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Id</th>
                <th>Product name</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            <?php echo $newobj->display();?>
        </table>
        <script>
            $(document).ready(function(){
                $(".selectstatus").change(function(){
                    var statusname = $(this).val();
                    var getid = $(this).attr("status-id");
                    //alert(displid);

                    $.ajax({
                        type:'POST',
                        url:'ajaxreceiver.php',
                        data:{statusname:statusname,getid:getid},
                        success:function(result){
                            $("#display").html(result);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

AJAX 处理程序页面：ajaxreceiver.php

    <?php
    include('processing.php');
    $newobj = new processing();

    if(isset($_POST['statusname'],$_POST['getid'])){
        $statusid = $_POST['statusname'];
        $id = $_POST['getid'];

        $newobj->getdata($statusid,$id);
    }
?>

PHP 类文件：processing.php

  <?php
    class processing{
        private $link;

        function __construct(){
            $this->link= new mysqli('localhost','root','','example');
            if(mysqli_connect_errno()){
                die ("connection failed".mysqli_connect_errno());
            }
        }

        function display(){
            $sql = $this->link->stmt_init();
            $id=1;
            if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){
                $sql->bind_result($id,$productname,$status);
                if($sql->execute()){
                    while($sql->fetch()){   
            ?>
                        <tr>
                            <td><?php echo $id;?></td>
                            <td><?php echo $productname;?></td>
                            <td><p id="display"><?php echo $status;?></p></td>
                            <td>
                                <select status-id=<?php echo $id;?> id="selectstatus" class="selectstatus">
                                    <option>Pending</option>
                                    <option>Delivered</option>
                                    <option>Cancelled</option>
                                    <option>Amount Paid</option>    
                                </select>
                            </td>
                        </tr>
            <?php   
                    }
                }
            }
        }

        function getdata($statusid,$id){
            $sql = $this->link->stmt_init();
            if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){
                $sql->bind_param('si',$statusid,$id);
                if($sql->execute()){
                    echo $statusid;
                }
                else
                {
                    echo "Update Failed";
                }
            }
        }
    }
?>

【问题讨论】：

能否在php中显示更新查询代码

标签： javascript php jquery mysql ajax

【解决方案1】：

问题出在这一行：

$("#display").html(result);

那么这里发生了什么？

您正在为每一行创建 display id，这不是一个好习惯，特别是在您的特定 .

这个问题有多种解决方案，

("#display", $(this).parent().parent()).html(result);

您将在此处将操作应用于特定的ID，它属于已收到更改操作的特定类的父级的父级

为每一行赋予显示行唯一的 id

例如如下：-

<td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td>

然后直接对它应用你的操作，

$("#display_" + getid).html(result);

这个解决方案与过去的解决方案类似，给父 <tr> 一个唯一的 id

例如：-

<tr id='parent_<?php echo $id; ?>'>

然后像这样从你的 ajax 应用你的操作

$("#display", $('#parent_' + getid)).html(result);

甚至：

$('#parent_' + getid + ' #display').html(result);

【讨论】：

您的第二个示例 <td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td> and then apply your action to it directly , $("#display" + getid).html(result); 帮助了我，谢谢
@PavanBaddi 祝你好运，但请注意，我的代码中有一个类型我已修复，$("#display" + getid).html(result); 必须是 $("#display_" + getid).html(result);

【解决方案2】：

是的，$("#display").html(result); 行有问题，因为 id ($("#display")) 总是选择在 DOM 中找到的第一个元素，您可以通过以下代码修复它-

<script>
  $(document).ready(function(){
            $(".selectstatus").change(function(){
                // make jquery object that make reference to select in which click event is clicked
                $this = $(this);
                var statusname = $(this).val();
                var getid = $(this).attr("status-id");
                //alert(displid);

                $.ajax({
                    type:'POST',
                    url:'ajaxreceiver.php',
                    data:{statusname:statusname,getid:getid},
                    success:function(result){
                        // this refer to the ajax callback function so we have to use $this which is initialized before ajax call
                        $($this).parents('tr').find("#display").html(result);
                    }
                });
            });
        });
    </script>

【讨论】：