在按钮上单击php中添加表格行并设置字段值

时间:2018-03-15 11:04:11

标签: javascript php jquery html ajax

我有一个表单,我必须在按钮点击时添加表格行。

这是我必须动态添加的表格行:(addProdToGroup.php)

<tr style="text-align: center;" id="products">
  <td><?php $j ?></td>
  <td><select class="form-control" name="code" id="productID" style="width: 429px;">
    <?php

    $sql = "SELECT * FROM `product`";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
          echo "<option id='".$row['code']."' value='".$row['code']."'>".$row['pname']."</option>";
        }
    } else {
        echo "0 results";
    }
    ?>
    </select>
  </td>
  <td><input type="text" name="hsnNo" id="hsnNo" readonly></td>
  <td><input type="text" name="qty" id="qty" readonly></td>
  <td class="coljoin"><input type="number" format="2" name="amount"></td>
  <td>
    <span class="fa fa-trash"></span>
  </td>
</tr>

这是我必须添加上述行的表:(order.php)

<table id="productTable" class="table-c">
                  <tr>
                    <th class="text-center" style="width: 5%;">SR No.</th>
                    <th class="text-center" style="width: 45%">DESCRIPTION</th>
                    <th class="text-center" style="width: 10%">HSN/SAC</th>
                    <th class="text-center" style="width: 10%">QTY IN-HAND</th>
                    <th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th>
                    <th class="text-center" style="width: 5%">Delete</th>
                  </tr>
                  <div class="dynamics">

                  </div>
                </table>

单击该按钮,将为PHP代码调用AJAX查询。 ajax代码是:(order.php)

<script>
  $(document).ready(function(){
    $('#addOrderProduct').click(function(){
      var j = 1;
      var dataString = "j="+j;
      $.ajax({
        url: "addProdToOrder.php",
        type: "post",
        data: dataString,
        success: function(response){
          $('.dynamics').html(response);
        }
      });
    });
  })
</script>

输出应该是这样的: Format for the rows

另外,我有一个脚本来从下拉列表中选择产品时更新字段。如何为表单中添加的每一行进行运行? 以下是更新字段的代码:(order.php)

$('#productID').change(function(){
      var code = $(this).val();
      console.log(code);
      var dataString = 'code='+code;

      $.ajax({
        url: "getProdDets.php",
        type: "post",
        data: dataString,
        success: function(response){
          var Vals = JSON.parse(response);
          console.log(Vals);
          $("input[name='hsnNo']").val(Vals.hsnNo);
          $("input[name='qty']").val(Vals.qty);
          console.log(Vals.hsnNo);
          console.log(response);
        }
      });
    });

1 个答案:

答案 0 :(得分:1)

string pattern = @"^(((ht|f)tp(s?))\:\/\/)?(www.|[a-zA-Z].)[a-zA-Z0-9\-\.]+\.(com|edu|gov|mil|net|org|biz|info|name|museum|us|bd|ca|uk)(\:[0-9]+)*(\/($|[a-zA-Z0-9\.\,\;\?\'\\\+&amp;%\$#\=~_\-]+))*$"; var linkParser = new Regex(pattern, RegexOptions.Compiled | RegexOptions.IgnoreCase); var rawString = @"www.antilogvacations.com bhxbldsa https://www.sample.com http://www.sample.com/xyz www.sample.com www.sample.com/xyz/#/xyz sample.com blah www.sample.com blah mofiz.com"; MatchCollection matches = linkParser.Matches(rawString); foreach (Match m in matches) Console.WriteLine(m.Value); } 更改为表格中的div并使用.append()添加动态行,例如

HTML更改:

tbody

<table id="productTable" class="table-c"> <thead> <tr> <th class="text-center" style="width: 5%;">SR No.</th> <th class="text-center" style="width: 45%">DESCRIPTION</th> <th class="text-center" style="width: 10%">HSN/SAC</th> <th class="text-center" style="width: 10%">QTY IN-HAND</th> <th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th> <th class="text-center" style="width: 5%">Delete</th> </tr> </thead> <tbody class="dynamics"></tbody> </table>

的变化
success