Javascript 在提交和更新数据库后保留的表行内创建文本表单

我想创建一个列，每个表行中都有一个文本框。用户可以在文本框中写入任何文本，然后单击“保存”按钮将其保存到数据库中。此外，文本框可以无限次编辑。我的代码如下：

<style>
.editMode{
       border: 1px solid black;
      }
</style>
<script type="text/javascript">
$(document).ready(function(){

 // Add Class
 $('.name').click(function(){
  $(this).addClass('editMode');
 });

 // Save data
 $(".name").focusout(function(){
  $(this).removeClass("editMode");
  var id = $(this).closest('tr').find("td:nth-child(2)").text();;
  var value = $(this).text();

  $.ajax({
   url: 'name_edit.php',
   type: 'post',
   data: { value:value, id:id },
   success:function(response){
    alert('Edits Saved');
    return false;
   }
  });

 });

});
</script>

<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);

$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];

$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";

mysqli_query($conn,$sql);

echo 1;

?>

index.php

<?php
...
while($row = $result->fetch_assoc()){
echo "<form action= 'search.php' method='post'>";
                echo "<form action='' method='get'>";
                echo "<tr>
                        <td><input type='checkbox' name='checkbox_id[]' value='" . $row['test_id'] . "'></td>
                        <td> ".$row['test_id']." </td>
                        

                        <td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
                        <td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
                        
                        <td> ".$row['path']." </td>
                        <td> ".$row['video1_path']." </td>
                        <td> ".$row['video2_path']." </td>
                        <td> ".$row['video3_path']." </td>
                        <td> ".$row['video4_path']." </td>";

                if(empty($row["directory"])){
                          echo "<td></td>";
                        }else {
                          echo "<td><div><button class='href' id='" . $row['test_id'] . "'  >View Report</button><div></td>";
                            }
                echo " <td style='display: none;'> ".$row['directory']." </td>
                       </tr>";
              }

           ?>

         </table> <br>
            <input id= 'select_btn' type='submit' name='submit' value='Submit' class='w3-button w3-blue'/>
        </form>
      </form>
       </div>


<!-- Opens the pdf file from the pdf_report column that is hidden -->
<script type="text/javascript">
$(document).on('click', '.href', function(){
  var result = $(this).attr('id');
  if(result) {
    var dir = $(this).closest('tr').find("td:nth-child(9)").text();
    window.open(dir);
    return false;
  }
});

</script>

<!-- Updates text input to database -->
<script type="text/javascript">
$(document).on('click', '.name', function(){
  var fcookie1= 'mycookie1';
  var fcookie2= 'mycookie2';
  var name = $(this).attr('id');
  if(name) {
    var text1 = $(this).closest('tr').find("td:nth-child(2)").text();
    var text2 = $(this).closest('tr').find("td:nth-child(3)").text();
    document.cookie='fcookie1='+text1;
    document.cookie='fcookie='+text2;

    $.ajax({
      url: "name_edit.php",
      type:"GET",
      success: function() {
        // alert("Edited Database");
      }
    });
  }
});
</script>

$（文档）.on（'单击'，'.href'，函数（）{
var result=$（this.attr（'id'）；
如果（结果）{
var dir=$（this.closest（'tr'）.find（“td:nth child（9）”）.text（）；
窗口打开（dir）；
返回false；
}
});
$（文档）.on（'click'，'name'，function（）{
变量fcookie1='mycookie1'；
var fcookie2='mycookie2'；
var name=$（this.attr（'id'）；
如果（姓名）{
var text1=$（this）.closest（'tr'）.find（“td:nth child（2）”）.text（）；
var text2=$（this）.closest（'tr'）.find（“td:nth child（3）”）.text（）；
document.cookie='fcookie1='+text1；
document.cookie='fcookie='+text2；
$.ajax({
url:“name_edit.php”，
键入：“获取”，
成功：函数（）{
//警报（“编辑数据库”）；
}
});
}
});

name_edit.php

<?php include 'dbh.php' ?>
<?php include 'search.php' ?>

<?php
if (isset($_COOKIE["fcookie1"]))
  echo $_COOKIE["fcookie1"];
    else
      echo "Cookie Not Set";

if (isset($_COOKIE["fcookie2"]))
  echo $_COOKIE["fcookie2"];
    else
      echo "Cookie Not Set";

$var1 = $_COOKIE["fcookie1"];
$var2 = $_COOKIE["fcookie2"];

$conn = mysqli_connect($servername, $username, $password, $database);
$sql = "UPDATE test_data SET name='$var2' WHERE id='$var1'";
$query_run= mysqli_query($conn,$sql);
if($query_run){
  echo '<script type="text/javascript"> alert(Data Updated)</script>';
} else {
  echo '<script type="text/javascript"> alert(Data Not Updated)</script>';
}
?>

我的想法是让用户编写任何文本。然后我将“抓取”文本及其预期id，并在单击“保存”按钮时将其保存到cookie中。cookie随后将在name_edit.php中进行响应，并将其插入sql代码中，sql代码将更新我的数据库

我不确定表单标签内的“值”中包含什么。如果数据库中有数据，则将其显示在也可以编辑的文本框中，否则显示空白以插入文本

---

我对编码还不熟悉，我有点困惑我的想法是否正确，或者我应该用另一种方式来处理它。

我做了一些研究，发现我不必使用表单，而是使用“contenteditable”。要编辑我更改的特定列

<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>

---

这个问题将对您有所帮助：警告：您对参数化预处理语句非常开放，应该使用参数化预处理语句，而不是手动生成查询。它们由或提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行。谢谢你的回复。在添加文本表单之前，我本来已经有了一个表单（复选框表单），它工作得很好。我看过你提供的例子，但没有什么区别，因为它已经在我身上起作用了。我被困在表单标签里面到底要写什么
<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);

$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];

$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";

mysqli_query($conn,$sql);

echo 1;

?>