Question

我试图克隆一个表格行。这不起作用。即使console.log();无效。

我试图克隆＆＃39; table-wrapper＆＃39;格。

HTML

 <div class="table-wrapper">

  <tr>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
        @foreach($products as $product)
          <option value="{{$product->id}}">{{$product->product_name}}</option>
        @endforeach
        </select>
      </td>

      <td style="width: 100px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
          <option>Dag</option>
          <option>Week</option>
          <option>Weekend</option>
          <option>4</option>
        </select>
      </td>

      <td>
        <select class="form-control" id="sel1">
          <option>0</option>
          <option>6</option>
          <option>21</option>
        </select>
      </td>

      <td style="width: 150px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="padding-top: 20px;">
        <p>&euro;</p>
      </td>


  </tr>

JS文件

$(document).ready(function() {
    console.log( "ready!" );

    $('#newcollection').click(function () {
      $(".table-wrapper:first").clone().insertAfter(".table-wrapper:last");
    });

    $('#newinput').click(function () {
      $(".rent-wrapper:first").clone().insertAfter(".rent-wrapper:last");
    });


});

按钮

<div class="col-lg-12">
  <input type="button" id="newcollection" class="btn btn-primary" value="+">
  </div>
</div>

你知道为什么这不起作用吗？正如我所说的甚至是console.log（）;没有用。

编辑：包含JS文件。它记录：＆＃39;准备好＆＃39;在页面加载和另一个按钮确实有效。

----------------------------- [编辑] --------------- -----------------------------

我已经使用bootstrap的表示例创建了一个新表。即使使用这个新表，它也无法运行。当我点击按钮时，它不会触发任何东西。即使在控制台中它也不会记录任何内容。（除了＆＃39;准备好了！＆＃39;）

<div class="table-wrapper">
<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
<input type="button" id="newcollection" class="btn btn-primary" value="+">
</div>

包含的JS文件

<script src="{!! env('APP_URL') !!}/js/jquery-migrate-1.2.1.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/bootstrap.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/modernizr.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/pace.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/retina.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/jquery.cookies.js"></script>
<script src="{!! env('APP_URL') !!}/js/main.js"></script> // This is the file i'm currently editting.

<script src="{!! env('APP_URL') !!}/js/jquery.sparkline.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/morris.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/raphael-2.1.0.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/bootstrap-wizard.min.js"></script>
<script src="{!! env('APP_URL') !!}/js/select2.min.js"></script>

<script src="{!! env('APP_URL') !!}/js/custom.js"></script>

Answer 1

你在这里搞错了

$（＆＃34;。表-包装：第一＆＃34）

您只想重复.table-wrapper，但您的定位是$(document).ready(function() { console.log("ready!"); $('#newcollection').click(function() { $(".table-wrapper tr").eq(0).clone().insertAfter(".table-wrapper tr:last"); }); });类元素

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table>
    <tr>

      <td style="width: 300px">

      </td>

      <td style="width: 100px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="width: 300px">
        <select class="form-control" id="sel1">
          <option>Dag</option>
          <option>Week</option>
          <option>Weekend</option>
          <option>4</option>
        </select>
      </td>

      <td>
        <select class="form-control" id="sel1">
          <option>0</option>
          <option>6</option>
          <option>21</option>
        </select>
      </td>

      <td style="width: 150px;">
        <input type="text" class="form-control" id="">
      </td>

      <td style="padding-top: 20px;">
        <p>&euro;</p>
      </td>


    </tr>
  </table>
  <div class="col-lg-12">
    <input type="button" id="newcollection" class="btn btn-primary" value="+">
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

jQuery按钮没有响应

1 个答案: