Question

我有一个HTML表单。此表单包含HTML表。实际的HTML表非常大。作为参考，我将在表格的HTML代码下面显示，表格只包含两行：

<form action="rebates.php" role="form" method="post">
  <div style="margin-left: 12px" class="col-xs-4">
    <div class="form-group">
      <label for="company_name" class="col-lg-4">Manufacturer </label>
        <div class="col-lg-7">
          <select id="company_name" name="company_name" class="form-control">
            <option value=""  selected='selected'>Select Manufacturer</option>
            <option value="33" >Eywa Solutions</option>
            <option value="37" >Amazon</option>
            <option value="40" >Test</option>
            <option value="42" >RK</option>
            <option value="46" >Santa Margherita</option>
          </select>
        </div>
      </div>
    </div>
    <div style="margin-left: -61px" class="col-xs-4">
      <div class="form-group">
        <label for="product_id" class="col-lg-3">Product </label>
          <div class="col-lg-7">
            <select id="product_id" name="product_id" class="form-control">
              <option value=""  selected='selected'>Select Product</option>
              <option value="5" >Chesse</option>
              <option value="8" >Laptop an</option>
              <option value="9" >Prosecco</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <br/> 
    <div class="col-lg-2"></div>            
      <div class="col-md-8">   
        <div style="overflow:auto" class="well">      
          <button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
          <br/>
          <div class="table-responsive">
            <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
              <thead>
                <tr  id="Row1">
                  <th style="vertical-align:middle" >Pack Of</th>
                  <th style="vertical-align:middle">Quantity</th>
                  <th style="vertical-align:middle">Volume</th>
                  <th style="vertical-align:middle">Unit</th>
                  <th style="vertical-align:middle">Rebate Amount</th>
                </tr>
              </thead>
              <tbody>
                <tr id="Row2">
                  <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
                  <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
                  <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
                  <td>
                    <div class="btn-group">
                      <select name="units[]" class="form-control">
                        <option value=""  selected='selected'>Select Unit</option>
                        <option value="5" >Microsecond</option>
                        <option value="7" >oz</option>
                        <option value="9" >ml</option>
                        <option value="10" >L</option>
                        <option value="12" >gms</option>
                      </select>
                    </div>
                  </td>
                  <td>
                    <input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
                  </td>
                </tr>            
                <tr>
                  <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
                  <td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
                  <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
                  <td>
                    <div class="btn-group">
                      <select name="units[]" class="form-control">
                        <option value=""  selected='selected'>Select Unit</option>
                        <option value="5" >Microsecond</option>
                        <option value="7" >oz</option>
                        <option value="9" >ml</option>
                        <option value="10" >L</option>
                        <option value="12" >gms</option>
                      </select>
                    </div>
                  </td>
                  <td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
                </tr>                      
              </tbody>
            </table>
            <button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
          </div>
        </div> <!-- /span8 -->    
        <div class="row">
          <div  class="col-xs-5"></div>
          <div style="margin-left: -9px"  class="col-xs-5">
            <button type="submit" class="btn btn-primary">Preview</button>
          </div>                
        </div>
      </div>
    </form>

我通过点击按钮动态地将行附加到表格（按钮出现在标签中，您可以在上面的代码中看到）。我尝试动态添加行的各种JQuery代码片段如下所示。一切正常：

/*JQuery for appending rows at the end of table*/
<script language="javascript"> 
$( document ).ready(function() {
  $('.btnAdd').click(function () {
    var count = 1,
    first_row = $('#Row2');
    //while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
      while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
    //while (count-- > 0) $('#blacklistgrid > tbody:last').append(first_row.clone().removeAttr('id'));
    //while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
  });
});
</script>

从上面的代码片段中，您可以建议我最合适的代码片段。现在我面临的问题是，如果我在表的末尾添加一行或多行，在每个附加行的文本字段中填充数据，并通过单击“{1}} on rebates.php”上的“提交”按钮提交表单我没有从附加行获取数据。我只从页面加载时先前存在的行中获取数据。那么有人可以帮我从动态追加的行中获取值吗？感谢您花费一些宝贵的时间来理解我的问题。等待你宝贵的回复。不过，如果您需要有关该问题的任何进一步信息，我可以为您提供相同的信息。我正在使用以下jQuery库：

$_POST

Answer 1

以下是我测试并正常工作的内容：

.html文件：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {

  var first_row = $('#Row2').clone();
  $('.btnAdd').click(function () {
    var count = 1;

    first_row.clone().removeAttr('id').appendTo('#blacklistgrid');

  });
});

</script>
</head>
<body>
<form action="formdata.php" role="form" method="post">
  <div style="margin-left: 12px" class="col-xs-4">
    <div class="form-group">
      <label for="company_name" class="col-lg-4">Manufacturer </label>
        <div class="col-lg-7">
          <select id="company_name" name="company_name" class="form-control">
            <option value=""  selected='selected'>Select Manufacturer</option>
            <option value="33" >Eywa Solutions</option>
            <option value="37" >Amazon</option>
            <option value="40" >Test</option>
            <option value="42" >RK</option>
            <option value="46" >Santa Margherita</option>
          </select>
        </div>
      </div>
    </div>
    <div style="margin-left: -61px" class="col-xs-4">
      <div class="form-group">
        <label for="product_id" class="col-lg-3">Product </label>
          <div class="col-lg-7">
            <select id="product_id" name="product_id" class="form-control">
              <option value=""  selected='selected'>Select Product</option>
              <option value="5" >Chesse</option>
              <option value="8" >Laptop an</option>
              <option value="9" >Prosecco</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <br/> 
    <div class="col-lg-2"></div>            
      <div class="col-md-8">   
        <div style="overflow:auto" class="well">      
          <button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
          <br/>
          <div class="table-responsive">
            <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
              <thead>
                <tr  id="Row1">
                  <th style="vertical-align:middle" >Pack Of</th>
                  <th style="vertical-align:middle">Quantity</th>
                  <th style="vertical-align:middle">Volume</th>
                  <th style="vertical-align:middle">Unit</th>
                  <th style="vertical-align:middle">Rebate Amount</th>
                </tr>
              </thead>
              <tbody>
                <tr id="Row2">
                  <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
                  <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
                  <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
                  <td>
                    <div class="btn-group">
                      <select name="units[]" class="form-control">
                        <option value=""  selected='selected'>Select Unit</option>
                        <option value="5" >Microsecond</option>
                        <option value="7" >oz</option>
                        <option value="9" >ml</option>
                        <option value="10" >L</option>
                        <option value="12" >gms</option>
                      </select>
                    </div>
                  </td>
                  <td>
                    <input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
                  </td>
                </tr>            
                <tr>
                  <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
                  <td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
                  <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
                  <td>
                    <div class="btn-group">
                      <select name="units[]" class="form-control">
                        <option value=""  selected='selected'>Select Unit</option>
                        <option value="5" >Microsecond</option>
                        <option value="7" >oz</option>
                        <option value="9" >ml</option>
                        <option value="10" >L</option>
                        <option value="12" >gms</option>
                      </select>
                    </div>
                  </td>
                  <td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
                </tr>                      
              </tbody>
            </table>
            <button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
          </div>
        </div> <!-- /span8 -->    
        <div class="row">
          <div  class="col-xs-5"></div>
          <div style="margin-left: -9px"  class="col-xs-5">
            <button type="submit" class="btn btn-primary">Preview</button>
          </div>                
        </div>
      </div>
    </form>
</body>
</html>

formdata.php

<?php
print_r($_POST);
?>

返回示例数据：

    Array
(
    [company_name] => 
    [product_id] => 5
    [pack] => Array
        (
            [0] => a
            [1] => b
            [2] => c
            [3] => d
        )

    [quantity] => Array
        (
            [0] => 2
            [1] => 4
            [2] => 2
            [3] => 2
        )

    [volume] => Array
        (
            [0] => 750
            [1] => 750
            [2] => 750
            [3] => 750
        )

    [units] => Array
        (
            [0] => 7
            [1] => 5
            [2] => 7
            [3] => 7
        )

    [amount] => Array
        (
            [0] => 3.00
            [1] => 7.00
            [2] => 3.00
            [3] => 3.00
        )

)

正如您所看到的，它添加了您使用jQuery附加的所有信息

在提交表单后从post数组中获取动态附加表行字段的值的问题是什么？

1 个答案: