javascript - 动态 JQUERY 数组适用于某些记录

Question

感谢 StackOverflow 的帮助，我已经创建了包含字段的单行条目，然后将每个字段添加到数组中，但是 Hours SQL 语句不起作用，例如它将有前 2 条记录的空白 sql 条目，然后在另一条记录上正常工作，但我看不出我做错了什么。任何帮助将不胜感激。

 <td colspan="3" align="left"><div id="hoursrow">
        <p> <span class="text">Hours Labour :</span></span></p>
        <p> <span class="headings"><span class="text"><span class="hours">Start Time:
          <input type="time" name="add_start" size="4" />
          Finish Time:
          <input type="time" name="add_finish" size="4" />
          Date:
          <input type="date" name="add_date" size="4" />
          OVT:
          <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" size="1" maxlength="1" />
          </span></span><span class="text"><span class="hours">
        <input onclick="addhours(this, event);" type="button" value="Add Labour" />
        </span></span></p>
        <p class="headings"><span class="text"><span class="hours">
          <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span></p>
        </div></td>
      <td width="7"></td>
      </tr>
    <tr>



var rownumhours = 1;

function addhours(obj, e) {
  rownumhours++;
  var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' +
  $(obj).closest('span.headings').find('[name="add_start"]').val() + '">  Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' +
  $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' +
  $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Show_Overtime: <input type="text" name="show_overtime_hours[' + rownumhours + ']" size="1" value="' + 
  (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="'                       +                       
  $(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
      (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
  ' "> <input type="button" value="Remove" onclick="removeRow(' +
      rownumhours + ');"></p>';
  jQuery('#hoursrow').append(hoursrow);

    $(obj).closest('span.headings').find('[name="add_start"]').val("");
    $(obj).closest('span.headings').find('[name="add_finish"]').val("");
    $(obj).closest('span.headings').find('[name="add_date"]').val("");
    $(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
        $(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
 }
function removeRow(rnum) {
  jQuery('#rownumhours' + rnum).remove();
}

所以它按照我的意愿正确显示在页面上，但主要问题是无法正确添加到数据库中。

我已经回显了要插入到数据库中的 sql，它显示了以下内容。

INSERT INTO hours(job_number,start_time,finish_time,date,overtime)
       VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
       VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
       VALUES('904','10:10','11:11','2017-01-03','') //

Sql部分如下

        if (
                 !empty($_POST['add_start']) && !empty($_POST['add_finish']) && !empty($_POST['add_date']) && !empty($_POST['show_overtime_hours'])&&
                 is_array($_POST['add_start']) && is_array($_POST['add_finish']) && is_array($_POST['add_date']) && is_array($_POST['show_overtime_hours'])&& 
                count($_POST['show_overtime_hours']) && count($_POST['add_finish']) && count($_POST['add_date']) === count($_POST['add_start']) 
                ) {
                $add_start_array = $_POST['add_start'];
                $add_finish_array = $_POST['add_finish'];
                $add_overtime_hours_array = $_POST['show_overtime_hours'];
                $add_date_array =$_POST['add_date'];                    
                     for ($i = 0; $i < count($add_start_array); $i++) {
                        $add_start_values = $mysqli->real_escape_string($add_start_array[$i]);
                        $add_finish_values = $mysqli->real_escape_string($add_finish_array[$i]);
                        $add_date_values = $mysqli-> real_escape_string($add_date_array[$i]);
                        $add_overtime_hours_boolean = $mysqli-> real_escape_string($add_overtime_hours_array[$i]);
                        $sql_add_hours = "INSERT INTO hours(job_number,start_time,finish_time,date,overtime) VALUES('$increment_job_number','$add_start_values','$add_finish_values','$add_date_values','$add_overtime_hours_boolean')";

                        $mysqli-> query($sql_add_hours);
                        // This next section is for debugging only
                        //echo ($add_date_values);
                        //echo ($add_start_values);
                        //echo ($add_finish_values);
                        echo ($sql_add_hours);
                        //echo ($add_overtime_hours_values);

                }

Answer 1

好的，在做了一些检查之后，实际上 JQuery 生成的第一组 html 组件是:

"Start Time:"
<input type="time" name="add_start[2]" size="4" value="23:57">
"Finish Time:"
<input type="time" name="add_finish[2]" size="4" value="22:57">
"Date:"
<input type="date" name="add_date[2]" value="2017-01-13">
"Show_overtime:"
<input type="text" name="show_overtime_hours[2]" size="1" value="0">
"Overtime:"
<input type="checkbox" name="add_overtime_hours[2]" size="1" value="on">
<input type="button" value="Remove" onclick="removeRow(2)">

你看那里...，计数器 (rownumhours) 从 2 开始。

因此在您的 php 部分，这些数组的第一个条目:

$add_start_array = $_POST['add_start'];
$add_finish_array = $_POST['add_finish'];
$add_overtime_hours_array = $_POST['show_overtime_hours'];
$add_date_array =$_POST['add_date'];

同样位于 2nd-index，但由于您的循环从零开始，因此该位置的条目为空。

所以从 -1 的 javascript 部分开始 rownumhours:

var rownumhours = -1;