如何使用jquery change()更新行状态并显示在相应表中 [英] How to update row status with jquery change() and display in respective table
问题描述
在使用<select>标记更改表中特定行的状态时，我面临着主要问题.
I'm facing major issue in changing status of a particular row in table with <select> tag .
我正在使用jquery-Ajax，因此，当在任何特定行上单击<select时，就可以使用此功能，例如:假设我已将id 2的表行的状态从待处理"更改为已交付".在此jquery上，change()事件触发，它从'tag'中获取值，并将该值通过ajax发送到其他文件.直到这里一切正常，数据通过ajax，并且具有特定ID的状态的行已成功更新.
I'm using jquery-Ajax so, here go functionality by this when is click on <select on any particular row for Example: Lets say i have changed the status of table row of id 2 from Pending to Delivered. On this jquery change() event triggers and it fetchs the value from 'tag' and sends the value to other file through ajax. Till here everything goes right the data goes through ajax and row with particular id's status is getting updated successfully.
但是在前端，它不会更改特定行的状态.但它仅更改第一行的状态.
But on Front end it does not change the status of the particular row. but it changes status of only first row .
在这里我需要它来更改特定行的状态.
Here i need it to change status of the particular row.
注意:我已经在stackoverflow中搜索了此问题.但是那些回答与我的问题不太接近.以下是链接1 link3
Note : I have searched in stackoverflow for this question. but those answere not come close to my question. Here are those links below Link 1link2link3
这是输出，我也在图像中解释了详细信息
Here is the Output and i have explained details in images also
有完整的代码
HTML页面:index.php
HTML page : 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
AJAX HANDLER PAGE : 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 CLASSES FILE : 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，这不是一个好习惯，特别是在您的特定行中.
you are creating display id for every row, which is not good practice to do , specially in your particular .
对此问题有多种解决方案，
there are various solutions for this problem ,
1)
("#display", $(this).parent().parent()).html(result);
在这里，您要将操作应用于特定的ID，该ID属于已收到更改操作的特定类的父级的父级
here you are going to apply the action to particular ID which is belongs to the parent of the parent of the particular class which had received the change action
2)
为显示行指定每行的唯一ID
giving the display row unique id for each row
例如如下:-
<td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td>
然后将您的操作直接应用于它，
and then apply your action to it directly ,
$("#display_" + getid).html(result);
3)
，此解决方案与过去的解决方案相似，为它的父级<tr>提供了唯一的ID
and this solution is similar to the past one , by giving the parent <tr> a unique id
例如:-
<tr id='parent_<?php echo $id; ?>'>
，然后像这样从ajax对其执行操作
and then apply your action it from your ajax like this
$("#display", $('#parent_' + getid)).html(result);
甚至:
$('#parent_' + getid + ' #display').html(result);
这篇关于如何使用jquery change()更新行状态并显示在相应表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
