使用jquery獲取多個動態html元素值

Question

我有一個在服務器端（php）創建的動態表，我使用jquery在html頁面中顯示它。

在這個表中有多個值，我想編輯它們並將這些編輯保存在mysql中。

，但我不知道如何得到這個值，我試圖剛剛更新的第一個值，而不是讓其他元素值的方式：

jQuery代碼：

$('#save_edit').on('click',function() { 
       $('#edit_test_show').hide(); 
       $('#enable_edit').show(); 
       $('#save_edit').hide(); 

       var vop_id = localStorage.getItem('op_id'); 

       var vop_title = $('#result_table').find('[name=op_title]').val(); 
       var vop_descrip = $('#result_table').find('[name=op_descrip]').val(); 
       var vobjects_count = $('#result_table').find('[name=objects_count]').val(); 
       var vobject_val = []; 

       var vobject_id = $('#result_table').find('[name=object_id]').val(); 
       for(i=0;i<vobjects_count;i++){ 
        vobject_val[i] = $('#result_table').find('[name=object_val]').val(); 

       } 


       $.post("Requests/OPS.php", //Required URL of the page on server 
        { // Data Sending With Request To Server 
         EDIT_OPS : true, 
         op_id : vop_id, 
         op_title : vop_title, 
         op_descrip : vop_descrip, 
         objects_count : vobjects_count, 
         object_id : vobject_id, 
         object_val : vobject_val 
        }, 
        function(response){ // Required Callback Function 
         $("#Response").text(response).css({color: 'green'}); 

        }); 

      }); 

動態表在PHP中：

if($op_objects_count<=0) { 
       echo "<table class='styled-table' cellspacing = '0' width = '360' border = '1' > 
           <tr> 
            <th> 
             <label for='session_order' style = 'margin-right:10px;color:#595959;float: right;' >اهداف فرآیند : </label > 
            </th> 
           </tr>"; 
       while ($objects_row = mysqli_fetch_assoc($op_objects)) { 
        echo "<tr> 
            <input name = 'object_id' type='hidden' 
                   value = '" . $objects_row['id'] . "' /> 
            <td> 
             <input name = 'object_val' style = 'width:340px;height: 36px;margin:0 3px 3px 3px;' 
                   value = '" . $objects_row['object'] . "' /> 
            </td> 

            <input name = 'objects_count' type='hidden' 
                   value = '".$op_objects_count."' /> 
           </tr>"; 
       } 
       echo "</table>"; 
       echo "<div class='cleaner h30'></div>"; 

我的PHP查詢來更新數據庫：

if($_POST['EDIT_OPS']==true){ 

    $op_id = $_POST['op_id']; 
    $op_title = $_POST['op_title']; 
    $op_descrip = $_POST['op_descrip']; 
    //=================================== 
    $objects_count = $_POST['objects_count']; 
    $object_id = $_POST['object_id']; 
    $object_val = $_POST['object_val']; 
// print_r($object_val); 

    $save_edit = $DBM->RunQuery("UPDATE at_ops SET op_title='$op_title' , op_descrip='$op_descrip' WHERE id='$op_id'",true,false); 

    for($i=0;$i<$objects_count;$i++){ 
     $save_edit = $DBM->RunQuery("UPDATE at_ops_objects SET object='$object_val[$i]' WHERE id='$i' AND ops_id='$op_id' ",true,false); 
    } 

    if(isset($save_edit) && $save_edit>0) 
     echo "success"; 
    else 
     echo "failure"; 

} 

Answer 1

如果從例如更改所有名稱

<input name='object_id' 

到

<input name='object_id[]' 

可以序列的形式，它會在服務器上創建陣列。

至於讓jQuery的所有值，這對我的作品：

$(function() { 
 
    $('#save_edit').on('click', function() { 
 

 
    var vobject_val = []; 
 
    $('#result_table').find('[name=object_val]').each(function() { 
 
     vobject_val.push(this.value); 
 
    }); 
 
    console.log(vobject_val); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class='styled-table' cellspacing='0' width='360' border='1' id="result_table"> 
 
    <tr> 
 
    <th> 
 
     <label for='session_order' style='margin-right:10px;color:#595959;float: right;'>اهداف فرآیند :</label> 
 
    </th> 
 
    </tr> 
 

 
    <tr> 
 
    <input name='object_id' type='hidden' value='r1' /> 
 
    <td> 
 
     <input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='1' /> 
 
    </td> 
 

 
    <input name='objects_count' type='hidden' value='1' /> 
 
    </tr> 
 
    <tr> 
 
    <input name='object_id' type='hidden' value='r2' /> 
 
    <td> 
 
     <input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='2' /> 
 
    </td> 
 

 
    <input name='objects_count' type='hidden' value='2' /> 
 
    </tr> 
 
    <tr> 
 
    <input name='object_id' type='hidden' value='r3' /> 
 
    <td> 
 
     <input name='object_val' style='width:340px;height: 36px;margin:0 3px 3px 3px;' value='3' /> 
 
    </td> 
 

 
    <input name='objects_count' type='hidden' value='3' /> 
 
    </tr> 
 

 
</table> 
 
<button type="button" id="save_edit">save</button>

Answer 2

我建議是這樣的：

  <table id="admTable"> 
      <thead style="width:100%;"> 
       <tr> 
       <th>row</th> 
       <th>name</th> 
       <th>username</th> 
       <th>pass</th> 
       <th>delete</th> 
       <th>edit</th> 
       </tr> 

      </thead> 
      <tbody id="adminsTb"> 
       <?php 
        $i=1; 

        while($admins=mysqli_fetch_array($results,MYSQLI_ASSOC)) 
        { 
         echo '<form action="insert.php" method="post" id="formId">'; 
         echo "<tr> 
           <td>$i</td><input type='hidden' name='id' value='$admins[id]'/> 
           <td><input name='adminname' type='text' value='$admins[name]' /></td> 
           <td><input name='user' type='text' value='$admins[user]'required='required' /></td> 
           <td><input name='pass' type='password' value='$admins[pass]' required='required' /></td> 
           <td> <input name='deladmin' type='submit' value='delete' /></td> 
           <td><input name='updateadmin' type='submit' value='save' /></td> 
          </tr>"; 

        $i++; 
        echo " </form>"; 
       } 
      ?> 
     </tbody> 

     </table> 

insert.php

if(isset($_POST['updateadmin'])){ 
$results=mysqli_query($dbCnn," update admins set name='$_POST[adminname]', user='$_POST[user]', pass='$_POST[pass]' where id=$_POST[id]");} 

// jQuery的AJAX

(function($){ 
    function processForm(e){ 
     $.ajax({ 
      url: 'insert.php', 
      dataType: 'text', 
      type: 'post', 
      contentType: 'application/x-www-form-urlencoded', 
      data: $(this).serialize(), 
      success: function(data, textStatus, jQxhr){ 


      }, 
      error: function(jqXhr, textStatus, errorThrown){ 
       console.log(errorThrown); 
      } 
     }); 

     e.preventDefault(); 
    } 

    $('#formId').submit(processForm); 
})(jQuery);