將JavaScript變量傳遞給動態形式的附加行

Question

我正在使用動態表格。

我想傳遞javascript值以追加行。 在這里，我如何將uid值傳遞給附加的行。 我試過<?php echo $uid = "<script>document.write(uid)</script>"; ?> <?php echo $uid = "<script>document.write(uid)</script>"; ?>在附加行中。

但是它不起作用。
這是我的代碼

默認行

<div class="form-group row">
  <?php $uid = '1';?>
  <label for="name" class="col-sm-1 form-control-label">Item</label>
  <div class="col-sm-2">
    <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
  </div>

  <div class="box-tools">
    <a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">
      <i class="fa fa-plus"></i>
    </a>
  </div>
</div>
<div id="divSpecificatiion">
</div>

追加行

<script type="text/template" id="temSpecification">
  <div class="form-group row" style="padding-top:10px;">

    <?php $uid ='';  ?>

    <label for="name" class="col-sm-1 form-control-label">Item</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
    </div>

    <div class="box-tools">
      <a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
</script>

$(document).ready(function (event) {
uid=1;uvd=2;$('#btnAddMoreSpecification').click(function ()
{$('#divSpecificatiion').append($('#temSpecification').html());uid++;uvd++; });

 $(document).on('click', '.btnRemoveMoreSpecification', function () {
      $(this).parent('div').parent('div').remove();
 });
});

輸出應該是這樣的

Answer 1

使用這樣的東西：

 $(document).ready(function(event) { uid = 1; uvd = 2; $('#btnAddMoreSpecification').click(function() { uid++; var templateHtml = $('#temSpecification').html();//save the html in a variable var temp = $(templateHtml).find('input[type="text"]').val(uid).end();//find the input and append the new uid $('#divSpecificatiion').append(temp);//append the new html to the div }); $(document).on('click', '.btnRemoveMoreSpecification', function() { $(this).parent('div').parent('div').remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group row"> <?php $uid = '1';?> <label for="name" class="col-sm-1 form-control-label">Item</label> <div class="col-sm-2"> <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>"> </div> <div class="box-tools"> <a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">Add more <i class="fa fa-plus"></i> </a> </div> </div> <div id="divSpecificatiion"> </div> <script type="text/template" id="temSpecification"> <div class="form-group row" style="padding-top:10px;"> <?php $uid =''; ?> <label for="name" class="col-sm-1 form-control-label">Item</label> <div class="col-sm-2"> <input type="text" class="form-control" name="" id="inputc" value=""> </div> <div class="box-tools"> <a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More"> <i class="fa fa-times"></i> </a> </div> </div> </script>