0

我想使用 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请求的名称获取所有输入选择收音机等

4

2 回答 2

1

您不想为每个字段执行 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 发布它的过程。

于 2013-04-06T21:15:39.380 回答
1

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

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

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

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

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

关键是给每一行一个唯一的ID，你可能已经在数据库中......

于 2013-04-06T18:05:37.310 回答