从 JSON 响应将属性更改为特定按钮答案

【问题标题】：Change properties to a specific button from JSON response从 JSON 响应将属性更改为特定按钮
【发布时间】：2020-08-27 07:31:34
【问题描述】：

我想要做的是能够通过点击改变属性的文本、样式和参数（onclick(status, id, starttime, endtime)）。无需刷新整个表。只是那个特定的按钮。到目前为止，我还无法改变这一切。我的代码如下。甚至无法更改特定按钮内的文本。

function cambiarEstado(estado, id, desde, hasta){
        var data = 'estado='+estado+'&id='+id+'&desde='+desde+'&hasta='+hasta;
        $.ajax({
            type: "POST",
            url: "ajax/cambiar_estado.php",
            data: data,
            dataType: "json",
             beforeSend: function(objeto){
                //$("#resultados").html("Mensaje: Cargando...");
              },
            success: function(datos){
                document.getElementById("resumen_semanal").innerHTML = "$"+datos[1];
                document.getElementById("resumen_semanal_p").innerHTML = "$"+datos[2];
                console.log($("#tabla_resumen tr td #btn_stat"+datos[0]));
                $("#tabla_resumen tr td #btn_stat"+datos[0]).text("xyz");
            }
        });
    }

$consulta = "UPDATE facturas SET estado_factura = '$nuevo_estado' WHERE id_factura = '$id'";
$accion = mysqli_query($con, $consulta);
if($accion){
    $consulta_new = "SELECT id_factura, numero_factura, fecha_factura, nombre_cliente,firstname,lastname, total_venta, 
    estado_factura FROM facturas INNER JOIN clientes ON facturas.id_cliente = clientes.id_cliente INNER JOIN users ON 
    facturas.id_vendedor = users.user_id WHERE fecha_factura >= '$desde' AND fecha_factura <= '$hasta'";
    $accion_new = mysqli_query($con, $consulta_new);
    if($accion_new){
while($fila = mysqli_fetch_array($accion_new)){
    if($fila['estado_factura'] == 1){
        $total_resumen += $fila['total_venta'];
    }else if ($fila['estado_factura'] == 2) {
        $total_resumen_p += $fila['total_venta'];
    }
}$arr = [$id,round($total_resumen, 2),round($total_resumen_p,2)];
echo json_encode($arr);//json response
    }
}

【问题讨论】：

如果我们假设您的 JSON/PHP 可以按预期工作，请单击编辑，然后单击 `[]' stacksn-p 并仅使用 HTML 和 JS 创建一个 minimal reproducible example。您的动画 gif 完全无法理解

标签： javascript jquery ajax dom

【解决方案1】：

对不起大家，我不习惯 SOverflow。但我可以解决它。使用参数更改 attr onclick 属性。我真正想做的是一个两态的按钮（toggle），它依次通过ajax咨询我的数据。让我们看看我做了什么。

点击功能。

function cambiarEstado(estado, id, desde, hasta){
        var data = 'estado='+estado+'&id='+id+'&desde='+desde+'&hasta='+hasta;
        $.ajax({
            type: "POST",
            url: "ajax/cambiar_estado.php",
            data: data,
            dataType: "json",
             beforeSend: function(objeto){
                //$("#resultados").html("Mensaje: Cargando...");
              },
            success: function(datos){
                document.getElementById("resumen_semanal").innerHTML = "$"+datos[2];
                document.getElementById("resumen_semanal_p").innerHTML = "$"+datos[3];
                console.log($("#tabla_resumen tr td #btn_stat"+datos[1]));
                if(datos[0] == 1){
                    $("#tabla_resumen #btn_stat"+datos[1]).text("Pagado");
                    $("#tabla_resumen #btn_stat"+datos[1]).removeClass("btn btn-sm btn-warning");
                    $("#tabla_resumen #btn_stat"+datos[1]).addClass("btn btn-sm btn-success");
                    $("#tabla_resumen #btn_stat"+datos[1]).removeAttr("onclick");
                    $("#tabla_resumen #btn_stat"+datos[1]).attr('onclick','cambiarEstado('+datos[0]+','+datos[1]+', '+desde+', '+hasta+')');
                }else if(datos[0] == 2){
                    $("#tabla_resumen #btn_stat"+datos[1]).text("Pendiente");
                    $("#tabla_resumen #btn_stat"+datos[1]).removeClass("btn btn-sm btn-success");
                    $("#tabla_resumen #btn_stat"+datos[1]).addClass("btn btn-sm btn-warning");
                    $("#tabla_resumen #btn_stat"+datos[1]).removeAttr("onclick");
                    $("#tabla_resumen #btn_stat"+datos[1]).attr('onclick','cambiarEstado('+datos[0]+','+datos[1]+', '+desde+', '+hasta+')');
                }
                //$("#resultados").html(datos);
            }
        });
    }

PHP 后端

$consulta = "UPDATE facturas SET estado_factura = '$nuevo_estado' WHERE id_factura = '$id'";
$accion = mysqli_query($con, $consulta);
if($accion){
    $consulta_new = "SELECT id_factura, numero_factura, fecha_factura, nombre_cliente,firstname,lastname, total_venta, 
    estado_factura FROM facturas INNER JOIN clientes ON facturas.id_cliente = clientes.id_cliente INNER JOIN users ON 
    facturas.id_vendedor = users.user_id WHERE fecha_factura >= '$desde' AND fecha_factura <= '$hasta'";
    $accion_new = mysqli_query($con, $consulta_new);
    if($accion_new){
while($fila = mysqli_fetch_array($accion_new)){
    if($fila['estado_factura'] == 1){
        $total_resumen += $fila['total_venta'];
    }else if ($fila['estado_factura'] == 2) {
        $total_resumen_p += $fila['total_venta'];
    }
}$arr = [$nuevo_estado,$id,round($total_resumen, 2),round($total_resumen_p,2)];
echo json_encode($arr);//json response
    }
}

查询的第一个表（到 mysql 表）

    $desde = strtotime($_POST['resumen_desde']);
$hasta = strtotime($_POST['resumen_hasta']);
$resumen_desde = $_POST['resumen_desde'].' 00:00:00';
$resumen_hasta = $_POST['resumen_hasta'].' 23:59:00';

$total_resumen = 0;//contador de pagos
$total_resumen_p = 0;

//$consulta = "SELECT * FROM facturas WHERE fecha_factura >= '$resumen_desde' AND fecha_factura <= '$resumen_hasta'";
if(!empty($resumen_desde) and !empty($resumen_hasta)){
    $consulta = "SELECT id_factura, numero_factura, fecha_factura, nombre_cliente,firstname,lastname, total_venta, estado_factura FROM facturas INNER JOIN clientes ON facturas.id_cliente = clientes.id_cliente INNER JOIN users ON facturas.id_vendedor = users.user_id WHERE fecha_factura >= '$resumen_desde' AND fecha_factura <= '$resumen_hasta'";    
}
if($resumen_desde == ' 00:00:00' or $resumen_hasta == ' 23:59:00'){//$resumen_desde == '00:00:00' and $resumen_hasta == '00:00:00'
    $consulta = "SELECT id_factura, numero_factura, fecha_factura, nombre_cliente,firstname,lastname, total_venta, estado_factura FROM facturas INNER JOIN clientes ON facturas.id_cliente = clientes.id_cliente INNER JOIN users ON facturas.id_vendedor = users.user_id";
}//echo $resumen_desde.$resumen_hasta;
$accion = mysqli_query($con, $consulta);
echo '<div class="table-responsive outer_div_inner"><table class="table table-striped" id="tabla_resumen"><tr><th>ID</th>
<th>N° COMP</th>
<th>FECHA COMP</th>
<th>CLIENTE</th>
<th>VENDEDOR</th>
<th>TOTAL VENTA</th>
<th>ESTADO</th></tr>';
while($fila = mysqli_fetch_array($accion)){
    if($fila['estado_factura'] == 1){
        $estado = '<button class="btn btn-sm btn-success" id="btn_stat'.$fila['id_factura'].'" onclick="cambiarEstado('.$fila['estado_factura'].','.$fila['id_factura'].','.$desde.','.$hasta.')">Pagado</button>';
        $total_resumen += $fila['total_venta'];
    }else if ($fila['estado_factura'] == 2) {
        $estado = '<button class="btn btn-sm btn-warning" id="btn_stat'.$fila['id_factura'].'" onclick="cambiarEstado('.$fila['estado_factura'].','.$fila['id_factura'].','.$desde.','.$hasta.')">Pendiente</button>';
        $total_resumen_p += $fila['total_venta'];
    }
    //$total_resumen += $fila['total_venta'];
    echo '<tr><td>'.$fila['id_factura'].'</td>
        <td>'.$fila['numero_factura'].'</td>
        <td>'.$fila['fecha_factura'].'</td>
        <td>'.$fila['nombre_cliente'].'</td>
        <td>'.$fila['firstname'].' '.$fila['lastname'].'</td>
        <td>'.$fila['total_venta'].'</td>
        <td>'.$estado.'</td></tr>';
}echo '</table></div><span id="total_resumen_srv">'.$total_resumen.'</span><span id="total_resumen_srv_p">'.$total_resumen_p.'</span>';
?>

如果我不是很清楚，我可以录制视频。

【讨论】：