点击

Question

尝试使用onClick再添加一行javascript。但它没有添加！

尝试以下代码：

    $(document).ready(function(){
        var cont = 3
        var qty = "qty"
		var item = "item"
		var what = "service"
        $(".add-row").click(function(){
            var nameqty = qty+cont
			var nameitem = item+cont
			var namewhat = service+cont
            var markup = '<tr><td><select name="' + nameitem + '" class="country"><option>Select Item</option><option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td><td><select class="country" name="' + namewhat + '"></select></td><td><input type="text" name="' + nameqty + '" value="" placeholder="Quantity"></td></tr>';
            $(markup).insertBefore($('button[type="submit"]').closest("tr"));
            cont++;
            console.log(qty)
			console.log(item)
			console.log(what)
        });
    });

<form method="post" action="invoice_form.php" id="item_sel">
	    
	<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
   <tr>
    <td colspan="3">
      <input type="text" name="customer" value="" placeholder="Customer Name">
    </td>
  </tr>
  <tr>
    <th>Item</th>
	<th>Service</th>
    <th>Qty</th>
    
  </tr>

    <tr>
	  <td>
	  <select name='item1' class='country'>
            <option value="Select Item">Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

	  <td><select class="country" name="service1">
</select></td>
<td><input type="text" name="qty1" value="" placeholder="Quantity"></td>
    </tr>
	<tr>
	  <td>
	  <select name='item2' class='country'>
            <option>Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

	  <td><select class="country" name="service2">
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
    </tr>
	<tr>
        <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
        </td>
    </tr>
</table>
    <input type="button" class="add-row" value="Add Row">
</form>

尝试使用on-click再添加一行javascript。但它没有添加！

我无法找到上述代码中的错误！

请查看代码段，基本上是“JavaScript”部分。

Answer 1

您的代码中存在两个问题：

1. 您的service变量尚未定义。
2. 您在markup变量中遇到引号问题。

如果您修复了这两个内容，那么您的代码段应该可以正常显示在下面的代码段中。

我建议使用一个模型div，它将在你的JS中用于创建新项目，如：

<div id="markup_model" class="hide">
    <table>
        <tr>
            <td>
                <select name="' + nameitem + '" class="country">
                    <option>Select Item</option>
                    <?php 
                        $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); 
                        $stmt->execute();

                        if( $stmt->rowCount() > 0 ){ 
                            while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ 
                                echo "<option value='{$row['IRN']}'>{$row['Name']}</option>";
                            }
                        }   
                    ?>
                </select>‌
            ​</td>
            <td>
                <select class="country" name="' + namewhat + '"></select>
            </td>
            <td>
                <input type="text" name="' + nameqty + '" value="" placeholder="Quantity"/>
            </td>
        </tr>
    </table>
</div>

然后在您的JS代码中，标记将如下所示：

var markup = $('#markup_model table').html();

希望这有帮助。

＆＃13;
＆＃13;
$(document).ready(function() {
  var cont = 3
  var qty = "qty"
  var item = "item"
  var what = "service"

  $(".add-row").click(function() {
    var nameqty = qty + cont;
    var nameitem = item + cont;
    var namewhat = what + cont;

    var markup = $('#markup_model tbody');
    
    $(markup).find('.country:eq(0)').attr('name', nameitem);
    $(markup).find('.country:eq(1)').attr('name', namewhat);
    $(markup).find('input').attr('name', nameqty);

    $(markup.html()).insertBefore($('button[type="submit"]').closest("tr"));

    cont++;
  });
});
＆＃13;
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="invoice_form.php" id="item_sel">
  <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
    <tr>
      <td colspan="3">
        <input type="text" name="customer" value="" placeholder="Customer Name">
      </td>
    </tr>
    <tr>
      <th>Item</th>
      <th>Service</th>
      <th>Qty</th>
    </tr>
    <tr>
      <td>
        <select name='item1' class='country'>
            <option value="Select Item">Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

      <td><select class="country" name="service1">
</select></td>
      <td><input type="text" name="qty1" value="" placeholder="Quantity"></td>
    </tr>
    <tr>
      <td>
        <select name='item2' class='country'>
            <option>Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>
      <td><select class="country" name="service2">
</select></td>
      <td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
    </tr>
    <tr>
      <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default hide">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
      </td>
    </tr>
  </table>
  <input type="button" class="add-row" value="Add Row">
</form><br><br><br>

<div id="markup_model" class="hide">
  <table>
    <tr>
      <td>
        <select name="nameitem" class="country">
                    <option>Select Item</option>
                </select>
      </td>
      <td>
        <select class="country" name="namewhat"></select>
      </td>
      <td>
        <input type="text" name="nameqty" value="" placeholder="Quantity" />
      </td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;