使用 jquery 获取多个动态 html 元素值

Question

我有一个在服务器端创建的动态 table (php)，我使用 jquery 在 html 页面中显示它。

在这个 table 中有多个值，我想编辑它们并将这些编辑保存在 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'});

                    });

            });

动态 table 在 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

我建议这样：

            <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);

Answer 2

如果您更改所有名称，例如

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

使用 jquery 获取多个动态 html 元素值

Getting multiple dynamic html element values using jquery

php

jquery

sql-update

multipartform-data

dynamic-tables