php - Jquery从循环中获取输入值

Question

我想使用 php、jquery、ajax 制作内联编辑解决方案

我的循环:

$a=0;

  while($row = $db->fetch_array($res)){
  if($a%2==1){
  $class = 'class="even"';
  }
  else{
  $class = 'class="odd"';
  }
  $a++;

HTML 表格:

   <tr <?php echo $class; ?>>
    <td class="th table-check-cell sorting_1"><input type="checkbox" name="zones_id[]" value="<?php echo $row['zone_id']; ?>"></td>
    <td><?php echo $a; ?></td>
    <td><?php echo $row['zone_name']; ?></td>
    <td><?php echo $row['zone_position']; ?></td>
    <td><?php echo $row['status']; ?></td>

    <td class="table-actions">
    <a href="javascript:void(0);" title="Edit" class="with-tip" onclick="slidemenu('innerlinks_<?php echo $a; ?>')"><img src="images/icons/fugue/pencil.png" width="16" height="16"></a></td>
    </tr>

    <tr style="display:none;" id="innerlinks_<?php echo $a; ?>" class="sub">
    <td><?php echo $a; ?></td>
    <td><input type="checkbox" /></td>
    <td><input type="text" class="zn" name="zone_name" id="zone_name" value="<?php echo $row['zone_name']; ?>" /></td>
    <td><input type="text" name="zone_pos" id="zone_pos"  value="<?php echo $row['zone_position']; ?>" /></td>
    <td colspan="2"><a><?php echo $row['zone_name']; ?></a></td>
    </tr>



    <?php } ?>   



    function slidemenu(id){
       $('#'+id).slideToggle();
      }





    ///second proccess 

    $(".sub").click(function(){
        $(this).closest('tr').find("input,select").each(function() {




        $.ajax({
          type: "POST",
          url: "<?php echo SITE_URL .'controlls/zone_add.php'; ?>",
          data: datastring,
          success: function (data) {

            alert("Details saved successfully!!!");
          }
            })

            });

    });

我想要两件事:

一个是隐藏我的数据行并显示表单行以进行编辑。 其次是如何通过ajax请求的名称获取所有输入选择 radio 等

Answer 1

您需要做的是为表中的每一行生成一个唯一的 ID - 并为表行指定该 id:

<tr id="<?= $id ?>" class="<?= $class ?>">

然后你可以使用 jQuery $("#<?= $id ?>") 找到这一行并操作该行的内容以用输入控件和提交/取消按钮替换静态文本。

此外，当您想要提交时，您可以通过使用 jQuery 查询来检索输入值。 例如:

$("tr#<?= $id ?> input#zone_name").value();

关键是为每一行提供一个唯一的 ID，您可能已经在数据库中拥有该 ID...