Jquery从循环中获取输入值

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

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...

You don't want to do an AJAX POST for each field.

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

I didn't look at the selectors you had. I'm assuming you have them correct. I just focused on the process for capturing the values from each field, adding it to a JavaScript object, and posting it via AJAX.