Question

我想选择行内容以表格形式显示，以便我可以更新它与jQuery的ajax，但我有一个问题。有谁可以帮助我吗？对我来说真的很重要，这样我就可以理解

运行代码时，我只能显示名称，该名称是actor表的主键

gestionActors.php

<?php

    require_once("config.php");
    include('getActors.php');

    $actors = get_actors();
            ?>
            <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajouter un acteur</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        table, tr, td{
            border :1px solid black;
        }
    </style>
    <script src="jquery-3.2.1.js"></script>
    <script >
        function update_actor(name){
            jQuery.ajax({
            type: "POST",
            data: 'name='+name,     // <-- put on top
            url: "update.php",
            cache: false,
            success: function(response)
            {
            alert("Record successfully updated");
            }
            });
 }
  function updateFunction(){
         $("#update").click(function(){
            name=(this).getAttribute('name');
            var address=$("#address"+name).text();
            var gender=$("#gender"+name).text();
            var birthdate=$("#birthdate"+name).text();
             $("#name").val(name);
            $("#address").val(address);
            $("#gender").val(gender);
            $("#birthdate").val(birthdate);
      });
     }
        function delete_actor(){
            var name=document.getElementById('name').value;
            var req = new XMLHttpRequest();
            req.onreadystatechange=function(){
                if(req.readyState==4 && req.status==200){
                    document.getElementById('div2').innerHTML="";
                    document.getElementById('div2').innerHTML=req.responseText;
                }
            }
            req.open('GET', 'delete.php?name='+name,true);
            req.send();

        }

    </script>
</head>
<body>
        <h1> *** Gestion Actors ***</h1>
        <table>
                <tr><th>Name</th>
                <th>Address</th>
                <th>Gender</th>
                <th>Birthdate</th>
                <th>Update Actor</th>
                <th>Delete Actor</th>
            </tr>
                <?php foreach($actors as $cle=>$actor) {?>
            <tr>

                <td><span id="<?php echo $actor['name']; ?>" name='name'><?php echo $actor['name']; ?></span></td>
                <td><span id="address" name='address'><?php echo $actor['address']; ?></span></td>
                <td><span id="gender" name='gender'><?php echo $actor['gender']; ?></span></td>
                <td><span id="birthdate" name='birthdate'><?php echo $actor['birthdate']; ?></span></td>
                <td><input type="button" id="update" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction();"></td>
                <td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
            </tr>
            <?php } ?>
        </table>
        <div id="update">
            <h2>Update Actor</h2>
            <table>
            <tr>
                <td><label>Name : </label></td><td><input type="text" name="name" id="name" placeholder="Actor Name..." ></td>
            </tr>
            <tr>
                <td><label>Address : </label></td><td><input type="text" id="address" name="address" placeholder="Actor Address.." ></td>
            </tr>
            <tr>
                <td><label>Gender : </label></td><td>
                <input type="radio" name="gender" id="gender" value="M"><span> M</span>
                <input type="radio" name="gender" id="gender" value="F"><span> F</span></td>
            </tr>
            <tr>
                <td><label>Birthdate : </label></td><td><input type="date" id="birthdate" name="birthdate" placeholder="Actor Birthdate.."></td>
            </tr>

            <tr>
                <td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>
        </tr>
        </table>

        </div>
</body>
</html>

update.php

<?php 
    include('config.php') ;
    global $con;
    if(!empty($_POST)){
        $name = htmlspecialchars($_POST['name']);
        $address = htmlspecialchars($_POST['address']);
        $gender = htmlspecialchars($_POST['gender']);
        $birthdate = htmlspecialchars($_POST['birthdate']);
        $sql_query="UPDATE stars set address = '$address', gender= '$gender', birthdate= '$birthdate' WHERE name like '$name'";
        $res=mysqli_query($con,$sql_query);
        if($res) echo "Actor updated";
        else{
            echo "update Problem :". mysqli_error($con);        
        }
    }


?>

Answer 1

function updateFunction(e){
    var elem = $(e.target);
    var parentRow = elem.parents('tr');
    $("#row_name").val(parentRow.find("[name='name']").text());
    $("#name").val(parentRow.find("[name='name']").text());
    $("#address").val(parentRow.find("[name='address']").text());
    //considering you saved the values are male and female in db
    if(parentRow.find("[name='gender']").text() == 'male') {
        $('[value="M"]').attr('checked', true)
    }
    else {
        $('[value="F"]').attr('checked', true)
    }
    $("#birthdate").val(parentRow.find("[name='birthdate']").text());
}

function update_actor(name){
    jQuery.ajax({
        type: "POST",
        data: 'name='+name,     // <-- put on top
        url: "update.php",
        cache: false,
        success: function(response)
        {
                alert("Record successfully updated");
                var rowToUpdate = $('#row_name').val();
                var row = $("tr[data-row-name='"+rowToUpdate+"']");
                row.find("[name=name]").text($("#name").val());
                row.find("[name=address]").text($("#address").val());
                row.find("[name=gender]").text($('input[name=gender]:checked').val());
                row.find("[name=birthdate]").text($("#birthdate").val());
        }
    });
}

问题是您正在循环中使用id参数，需要将其删除。而您的updateFunction只需将点击绑定到更新按钮即可。

我从数据行中删除了id属性，并获取了有关目标元素的值。

       <?php foreach($actors as $cle=>$actor) {?>
        <tr data-row-name="<?php echo $actor['name']; ?>">
            <td><span name='name'><?php echo $actor['name']; ?></span></td>
            <td><span name='address'><?php echo $actor['address']; ?></span></td>
            <td><span name='gender'><?php echo $actor['gender']; ?></span></td>
            <td><span name='birthdate'><?php echo $actor['birthdate']; ?></span></td>
            <td><input type="button" id="update_row" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction(event);"></td>
            <td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
        </tr>
        <?php } ?>

像上面一样更新您的html，并像我提到的那样更新您的updateFunction。您可以看到所有填充的值。

在更新表单的保存按钮上方，添加一个隐藏字段作为row_name，以了解我们将更新哪一行，以便在更新ajax成功后可以使用此值手动更新行。

<input type="hidden" name="name" id="row_name" placeholder="" >
<td colspan="2"><input type="submit" name="update" value="Save" onclick="update_actor();"></td>

Answer 2

请如下更新您的表格

<table>
      <tr><th>Name</th>
        <th>Address</th>
        <th>Gender</th>
        <th>Birthdate</th>
        <th>Update Actor</th>
        <th>Delete Actor</th>
      </tr>
      <?php foreach($arrdata as $cle=>$actor) {?>
       <tr>
        <td><span class="actorname"><?php echo $actor['name']; ?></span></td>
        <td><span class="address"><?php echo $actor['address']; ?></span></td>
        <td><span class="gender"><?php echo $actor['gender']; ?></span></td>
        <td><span class="birthdate"><?php echo $actor['birthdate']; ?></span></td>
        <td><input type="button" id="update" name="<?php echo $actor['name'];?>" value="update" onclick="updateFunction(event

);"></td>
    <td><input type="button" name="delete" value="delete" onclick="delete_actor();"></td>
  </tr>
  <?php } ?>
</table>
<div id="update">
  <h2>Update Actor</h2>
  <form name="actor" id="actordata">
  <table>
    <tr>
      <td><label>Name : </label></td><td><input type="text" name="name" id="name" placeholder="Actor Name..." ></td>
    </tr>
    <tr>
      <td><label>Address : </label></td><td><input type="text" id="address" name="address" placeholder="Actor Address.." ></td>
    </tr>
    <tr>
      <td><label>Gender : </label></td><td>
      <input type="radio" name="gender" id="gender" value="M"><span> M</span>
      <input type="radio" name="gender" id="gender" value="F"><span> F</span></td>
    </tr>
    <tr>
      <td><label>Birthdate : </label></td><td><input type="date" id="birthdate" name="birthdate" placeholder="Actor Birthdate.."></td>
    </tr>

    <tr>
      <td colspan="2"><input type="button" name="update" value="Save" onclick="update_actor();"></td>
    </tr>
  </table>
</form>
</div>

更新的ajax函数如下。

 function update_actor(){
    jQuery.ajax({
      type: "POST",
      data:  $('#actordata').serialize(),     // <-- put on top
      url: "update.php",
      cache: false,
      success: function(response)
      {
        alert("Record successfully updated");
      }
    });
  }
  function updateFunction(e){
    $('[value="M"]').attr('checked', false);
    $('[value="F"]').attr('checked', false);
    var elem = $(e.target);
    var parentRow = elem.parents('tr');
    $("#name").val(parentRow.find("[class='actorname']").text());
    $("#address").val(parentRow.find("[class='address']").text());
    if(parentRow.find("[class='gender']").text() == 'M') {
        $('[value="M"]').attr('checked', true)
    }
    else {
        $('[value="F"]').attr('checked', true)
    }
    $("#birthdate").val(parentRow.find("[class='birthdate']").text());
 }

使用jQuery Ajax使用更新按钮显示选定的行表

2 个答案: