Javascript 如何在Ajax中传递动态html行中的数据?

Javascript 如何在Ajax中传递动态html行中的数据?,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个表单,用户可以使用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> <in

我有一个表单,用户可以使用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>';
}

?>
是jQuery吗?
然后是:

var data = $( "#frm_salary" ).serialize();
$.post( "test.php", data )
但是因为
jQuery.serialize()
在方括号中有一些问题,所以要将它们放在$\u文章中,您所要做的就是增加一点魔力:

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

就这么简单

如果要从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()
...

}); 

您可以在模式中显示提取的值,然后将值发布到数据库中

表格单元格中有输入标记。是的,JQuery!那么,我将把表单内容传递给服务器?是的,您将表单内容传递给脚本,就好像有人会按Submit键一样。我如何在PHP中获取数据?它将只显示在$\u Postal中。您熟悉PHP吗?来自POST请求的数据到达一个超全局$\u POST数组。尝试
print\r($\u POST)
,您将看到它们