Jquery从循环中获取输入值

Question

I want to make an inline editing solution using 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 Table:

   <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!!!");
          }
            })

            });

    });

I want two things:

One is hide my data row and show form row for editing. Second is how to get all input select radio etc by there name for ajax request

Answer 1

What you need to do is generate a unique ID for each row in the table - and give the table row that id:

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

Then you can find this row using jQuery $("#<?= $id ?>") and manipulate the contents of the row to replace static text with input controls and submit/cancel buttons.

Also, when you want to submit, you can retrieve the input values by querying them with jQuery. For example:

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

The key is to give each row a unique id, which you might already have in the database...