Question

我想使用php，jquery，ajax

制作内联编辑解决方案

My Loop：

$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请求的名称来获取所有输入选择无线电等

Answer 1

您需要做的是为表格中的每一行生成一个唯一的ID - 并为表格行提供id：

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

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

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

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

关键是为每一行提供一个唯一的ID，您可能已经在数据库中使用了这个...

Answer 2

您不希望为每个字段执行AJAX POST。

$(".sub").click( 
    function() {
        var data = {};
        $(this).closest("tr").find( "input,select").each(
            function() {
                data[$(this).attr("name")] = $(this).val();
            }
        );
        $.post( "your URL", data, function( data ) { alert( "Successful!" ); } );
    }
);

我没看过你的选择器。我假设你让他们纠正了。我只关注从每个字段捕获值的过程，将其添加到JavaScript对象，然后通过AJAX发布。

Jquery从循环中获取输入值

2 个答案: