Question

我有这个表单，用户可以使用JQuery添加行：

<form id="frm_salary"  role="form" action="" method="post">
       <!--start of frm_salary--> 
       <div class="form-group">
          <label for="ca_salary_date1">Date:</label>
          <input type="date" class="form-control" name="ca_salary_date_filed" placeholder="Date" required/>
       </div>
       <div class="form-group">
          <label for="ca_purpose1">Purpose:</label>
          <input type="text" class="form-control" name="ca_salary_purpose" placeholder="Purpose" required/>
       </div>
       <table class="table table-bordered table-hover" id="tab_logic">
          <thead>
             <tr >
                <th class="text-center">
                   Area
                </th>
                <th class="text-center">
                   Date/s
                </th>
                <th class="text-center">
                   Number of Local Hires
                </th>
                <th class="text-center">
                   Salary Per Local Hire Per Day
                </th>
                <th class="text-center">
                   Amount
                </th>
             </tr>
          </thead>
          <tbody>
             <tr id='addr0'>
                <td>
                   <input type="text" name='ca_salary_area[]'  placeholder='Area' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_date[]' placeholder='Date/s' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_localhires[]' placeholder='Number of Local Hires' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_perday[]' placeholder='Salary Per Local Hire Per Day' class="form-control" required/>
                </td>
                <td>
                   <input type="text" name='ca_salary_amount[]' placeholder='Amount' class="form-control" />
                </td>
             </tr>
             <tr id='addr1'></tr>
          </tbody>
       </table>
       <div class="form-group">
          <input type="hidden" class="form-control" name="ca_total_salary" >
       </div>
       <div class="text-center"> 
          <input type="submit" name="submit_salary" class="btn btn-success" value="Submit" /> 
       </div>
    </form>
    <!--end of frm_salary-->

我也有这个用于在数据库中插入其值的PHP代码。它正在发挥作用。

<?php
$total_amount = 0;
if (isset($_POST['submit_salary'])) {
    //calculations
    for ($j = 0; $j < count($_POST['ca_salary_area']); $j++) {
        $nos_hire1               = $_POST['ca_salary_localhires'][$j];
        $nos_salaray1            = $_POST['ca_salary_perday'][$j];
        $subtotal_salary_amount1 = $nos_hire1 * $nos_salaray1;
        $total_amount += $subtotal_salary_amount1;
    }

    $form_data               = array();
    $form_data['date_filed'] = mysql_real_escape_string($_POST['ca_salary_date_filed']);
    $form_data['purpose']    = mysql_real_escape_string($_POST['ca_salary_purpose']);
    $form_data['total']      = $total_amount;

    $tbl    = "tblcasalaryform";
    // retrieve the keys of the array (column titles)
    $fields = array_keys($form_data);

    // build the query
    $sql_salary = "INSERT INTO " . $tbl . "
                                (`" . implode('`,`', $fields) . "`)
                                VALUES('" . implode("','", $form_data) . "')";

    // run the query result resource
    mysql_query($sql_salary);
    $last_id_inserted = mysql_insert_id($bd);

    echo $last_id_inserted;


    for ($i = 0; $i < count($_POST['ca_salary_area']); $i++) {
        $nos_hire               = $_POST['ca_salary_localhires'][$i];
        $nos_salaray            = $_POST['ca_salary_perday'][$i];
        $subtotal_salary_amount = $nos_hire * $nos_salaray;
        $sql                    = "INSERT INTO `tblcasalaryformdetails` SET
                                                `area` = '" . $_POST['ca_salary_area'][$i] . "', 
                                                `dates` = " . $_POST['ca_salary_date'][$i] . ",
                                                `number_of_local_hires` = " . $_POST['ca_salary_localhires'][$i] . ",
                                                `salary_per_local_hire_per_day` = " . $_POST['ca_salary_perday'][$i] . ",
                                                `amount` = " . $subtotal_salary_amount . ",
                                                `casalaryform_id` = " . $last_id_inserted . "";
        mysql_query($sql);
    }
    echo '<p class="bg-success" style="padding:5px;border-radius:5px;text-align:center">Successfully Inserted</p>';
}

?>

我想使用Ajax，我的问题是如何从表格中传递/获取输入名称动态创建的值？

Answer 1

是jQuery吗？然后是：

var data = $( "#frm_salary" ).serialize();
$.post( "test.php", data )

但是因为jQuery.serialize()在方括号中存在一些问题，要在$ _POST中获取它们所有你需要做的就是添加一些魔法：

var data = $( "#frm_salary" ).serialize().replace(/%5B%5D/g, '[]');
$.post( "test.php", data )

就这么简单！

Answer 2

如果要从HTML表中动态提取数据，可以使用JQuery的find（）方法。

示例：

$('#tab_logic').click(function(){

var firstColumn= $(this).find('td:first').text();
var secondColumn= $(this).find('td:nth-child(2)').text()
var thirdColumn= $(this).find('td:nth-child(3)').text()
...

});

您可以在模态中显示提取的值，然后在数据库中POST值

如何从Ajax中的动态html行传递数据？

2 个答案: