javascript - 使用AJAX将变量从动态html表传递到php更新查询

我想在输入文本中添加一个值valor并将该值赋给它所在的行，为此我需要传递给update查询ID和valor。
我做错什么了？
桌子

<?php
$IDTipoEquipamento = $_POST['Car'];
$result = mysqli_query($conn,"SELECT tipocaracteristicas.IDTipoCaracteristicas,tipoequipamento.TipoEquipamento, caracteristicas.Caracteristica, Valor FROM `tipocaracteristicas` LEFT JOIN tipoequipamento on tipoequipamento.IDTipoEquipamento= tipocaracteristicas.IDTipoEquipamento LEFT JOIN caracteristicas on caracteristicas.IDCaracteristicas=tipocaracteristicas.IDCaraterisiticas  WHERE tipocaracteristicas.IDTipoEquipamento= '$IDTipoEquipamento';");
echo "<table width='100% class='sortable' id='datatables-example'>
    <tr>
</tr>
    <tr>
    <td class='pure-table'></td>
        <td class='pure-table'><b>Tipo de Equipamento</b></td>
        <td class='pure-table'><b>Caracteristica</b></td>
        <td class='pure-table'><b>Valor</b></td>
        <td class='pure-table'><b>Atribuir</b></td>
    </tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tbody data-link='row' class='rowlink'>";
echo "<tr>";
echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
echo "<td>" . $row['TipoEquipamento'] . "</td>";
 echo "<td>" . $row['Caracteristica'] . "</td>";
echo "<td><input type='text' name='valor' id='valor' value=''></td>";
echo "<td><a href='' onclick='UpdateTable()'><img id='img' src='save_icon.gif'/></a></td>";
echo "</tr>";
echo "</tbody>";
}
echo"<br>";
echo "</table>";
mysqli_close($conn);
}
?>

Jquery+Ajax

<script type="text/javascript">
    function UpdateTable() {

         $("#valor").on('input', function() {
            var valor = $(this).val();

      $.ajax({
            url: 'insertCharacteristicsEquipment.php',
            type: "POST",
            cache:false,
            data:{valor:valor},
            async: false,
            dataType:'html',
            success:function(data) {
                 $("#valor").html(data);
                  alert(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });

          $("#IDTipoCaracteristicas").on('input', function(){
            var IDTipoCaracteristicas = $(this).val();
         $.ajax({
            url: 'insertCharacteristicsEquipment.php',
            type: "POST",
            cache:false,
            data:{IDTipoCaracteristicas:IDTipoCaracteristicas},
            async: false,
            dataType:'html',
            success:function(data) {
                  $("#IDTipoCaracteristicas").html(data);
                  alert(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });

        });
    }
</script>

PHP更新查询页面

<?php
include ('conetar.php');
if(isset($_POST['valor'], $_POST['IDTipoCaracteristicas'])){
    $valor = $_POST['valor'];
    $IDTipoCaracteristicas= $_POST['IDTipoCaracteristicas'];
    $sql = "UPDATE `tipocaracteristicas` SET `Valor`='$valor' WHERE `IDTipoCaracteristicas`= '$IDTipoCaracteristicas'";
   if(mysqli_query($conn,$sql)){
} else{
    echo "ERROR: Could not able to execute $sql. ";
}
    mysqli_close($conn)
}
?>

最佳答案

请看下面两个声明，

echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
                                                          ^^^^^^^^^^^^^^^^^^^^^^^^^

和

echo "<td><input type='text' name='valor' id='valor' value=''></td>";
                                          ^^^^^^^^^  ^^^^^^^^

为所有表行分配相同的id，请改用class。将类分配给每个idtipocaretics、Valor输入元素以及更新表超链接。此外，您没有在Valor input元素中分配任何值。另外，使用javascript:void(0);使锚标记不可链接，否则每次单击链接时都会重定向。所以你的循环应该是这样的：

while($row = mysqli_fetch_array($result)) {
    echo "<tbody data-link='row' class='rowlink'>";
    echo "<tr>";
    echo "<td><input type='text' name='IDTipoCaracteristicas' class='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>";
    echo "<td>" . $row['TipoEquipamento'] . "</td>";
    echo "<td>" . $row['Caracteristica'] . "</td>";
    echo "<td><input type='text' name='valor' class='valor' value='". $row['Valor'] ."'></td>";
    echo "<td><a href='javascript:void(0);' class='updateTable'><img id='img' src='save_icon.gif'/></a></td>";
    echo "</tr>";
    echo "</tbody>";
}

随后，jQuery/AJAX代码应该如下所示：

<script>
    $(document).ready(function(){
        $(document).on('click', '.updateTable', function(){
            var IDTipoCaracteristicas = $(this).parents('tr').find('.IDTipoCaracteristicas').val();
            var valor = $(this).parents('tr').find('.valor').val();

            $.ajax({
                url: 'insertCharacteristicsEquipment.php',
                type: "POST",
                cache:false,
                data:{valor:valor, IDTipoCaracteristicas: IDTipoCaracteristicas},
                async: false,
                success:function(data){
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
        });
    });
</script>

关于javascript - 使用AJAX将变量从动态html表传递到php更新查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41266623/