gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 23:19:23 26 4
gpt4 key购买 nike

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

我使用的是 jquery-Ajax,所以,当点击 <select 时,这里会显示此功能。在任何特定行上,例如:假设我已经更改了 id 2 的表行的状态从待定到已交付。在这个 jquery change() 事件触发器上,它从“标签”中获取值并通过 ajax 将值发送到其他文件。直到这里一切正常,数据通过 ajax 并且具有特定 id 状态的行被成功更新。

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

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

注意:我在 stackoverflow 中搜索了这个问题。但那些回答并没有接近我的问题。以下是这些链接 Link 1 link2 link3

提前致谢

这是输出,我也在图片中解释了细节 Output image with explanation

有完整代码

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";
}
}
}
}
?>

最佳答案

问题出在这一行:

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

那么这里发生了什么?

您正在创建 display每行的 ID,这不是好的做法,特别是在您的特定情况下。

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

1)

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

在这里您要将操作应用于特定的 ID它属于已收到更改操作的特定类的父级

2)

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

例如如下:-

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

然后直接对它应用你的 Action ,

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

3)

这个解决方案与过去的解决方案类似,通过给父级 <tr>唯一标识

例如:-

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

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

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

甚至:

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

关于javascript - 如何使用 jquery change() 更新行状态并显示在相应的表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42480310/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com