Question

我正在将sql数据提取到另一个用于站点的php表。对于表格中的每一行，我都有一个删除或编辑该特定行的按钮。编辑按钮工作正常，但我一直有删除按钮的问题。截至目前，删除按钮仅删除表的第一行，而不删除已选择删除的行。

以下是该表的示例：

while($row = mysqli_fetch_array($result)){
  <tr>
    <td>'.($row['some_data']).'</td>
    <td>
      <form action="meeting_update_milestone.php" method="POST">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="submit" value="EDIT" />
      </form>
    </td>
    <td>
      <form id="meeting_delete_item">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="button" onclick="delete_meeting_item()" value="DELETE" />
      </form>
    </td>
  </tr>';
}

此数据正在发送到ajax调用：

function delete_meeting_item(){
  var x = confirm("Are you sure you want to permanetly delete this item?");
  if (x){
    $.ajax({
      type: "POST",
      url: "meeting_delete_item.php",
      data: $('#meeting_delete_item').serialize(),
      cache: false,
      success: function(result){
        alert(result);
      }
    })//end ajax
  }
  else{
    return false;
  }
}

你可以告诉我循环创建具有相同id的多个表单的行。我认为这是在这里创造问题？如果是这样，我如何通过保持相同的格式来修复它。我相信表单必须有一个唯一的名称，但我不知道如何将其实现到ajax数据字符串中。

Answer 1

在循环之外，您可以保留一个计数器：$x = 0并在生成表单时使用它：<form id="meeting_delete_item"'.$x.'>。在循环结束时，递增计数器以进行下一次迭代++$x。在您的javascript中，您可能会根据按下的按钮检索ID。

示例表单：

  <form id="myForm1">
    <button>Click me!</button>
  </form>
  <form id="myForm2">
    <button>Click me!</button>
  </form>

示例JavaScript：

$('form button').click(function(e) {
  var $form = $(this).closest('form');
  console.log($form.attr('id'));
  return false; //stop form submission
});

<强> Live demo (click).

此外，内联js（如你的html中的onclick）从来都不是一个好习惯。相反，请按照我的示例代码中的示例，并使用javascript绑定click函数。有关此主题的更多信息，请阅读以下部分结果：https://www.google.com/search?q=Why+is+inline+js+bad%3F

Answer 2

你的问题在这里

$('#meeting_delete_item').serialize()

您应该使用其他内容来确定当前行是。

HTML FORM PART FOR DELETE

  <form id="meeting_delete_item">
    <input type="button" onclick="delete_meeting_item('.$row['id'].')" value="DELETE" />
  </form>

<强> JS

function delete_meeting_item(deleteId){
  var x = confirm("Are you sure you want to permanetly delete this item?");
  if (x){
    $.ajax({
      type: "POST",
      url: "meeting_delete_item.php",
      data: {mile_id: deleteId},
      cache: false,
      success: function(result){
        alert(result);
      }
    })//end ajax
  }
  else{
    return false;
  }
}

Answer 3

我无法评论您的PHP代码的有效性，但正如您所说，id值必须是唯一的。在这种情况下，我不相信这个ID确实对你想要实现的目标产生了很大的影响。

删除id和内嵌onclick事件：

while($row = mysqli_fetch_array($result)){
  <tr>
    <td>'.($row['some_data']).'</td>
    <td>
      <form action="meeting_update_milestone.php" method="POST">
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="submit" value="EDIT" />
      </form>
    </td>
    <td>
      <form>
        <input type="hidden" name="mile_id" value="'.$row['id'].'" />
        <input type="button" class="delete" value="DELETE" />
      </form>
    </td>
  </tr>';
}

使用jQuery绑定它。我添加了一个类，以便能够将选择器添加到删除按钮。

$(document).ready(function(){
    $('.delete').click(function(){

      var x = confirm("Are you sure you want to permanetly delete this item?");
      if (x){
        $.ajax({
          type: "POST",
          url: "meeting_delete_item.php",
          data: $(this).closest(form).serialize(),
          cache: false,
          success: function(result){
            alert(result);
          }
        })//end ajax
      }
      else{
        return false;
      }
    }
}

点击删除按钮，我们得到最近的表格并序列化该表格的数据。

循环使用多种形式

3 个答案: