我如何克隆表行并将其附加到表？

Question

我想通过按钮将空行添加到表格的底部。所以我写了这个代码来做到这一点。但是当我点击按钮时没有任何反应。

我有以下相关HTML代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  var $add_button = $('#add_new');
  var $blank_row = $('#blank_row');
  var $time_table = $('#time_table');

  $add_button.click(function() {
    $blank_row.clone().appendTo($time_table);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
  <tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Rate</th>
    <th class="time">ST</th>
    <th class="time">TH</th>
    <th class="time">DT</th>
    <th class="time">EX-ST</th>
    <th class="time">EX-TH</th>
    <th class="time">EX-DT</th>
  </tr>
  <tr id="blank_row">
    <td><input type="text" name="last_name"></td>
    <td><input type="text" name="first_name"></td>
    <td><input type="text" name="rate"></td>
    <td><input type="number" name="st" class="time_input"></td>
    <td><input type="number" name="th" class="time_input"></td>
    <td><input type="number" name="dt" class="time_input"></td>
    <td><input type="number" name="ex_st" class="time_input"></td>
    <td><input type="number" name="ex_th" class="time_input"></td>
    <td><input type="number" name="ex_dt" class="time_input"></td>
  </tr>
</table>

<button id="add_new">Button</button>

＆＃13;

＆＃13;

＆＃13;

我做了很多搜索，但我无法理解我做错了什么。

Answer 1

删除变量前的$。使用您声明的变量。无论有没有$，但使用相同的名称。

$(document).ready(function() {
  var add_button = $('#add_new');
  var blank_row = $('#blank_row');
  var time_table = $('#time_table');

  add_button.click(function() {
    blank_row.clone().appendTo(time_table);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
  <tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Rate</th>
    <th class="time">ST</th>
    <th class="time">TH</th>
    <th class="time">DT</th>
    <th class="time">EX-ST</th>
    <th class="time">EX-TH</th>
    <th class="time">EX-DT</th>
  </tr>
  <tr id="blank_row">
    <td><input type="text" name="last_name"></td>
    <td><input type="text" name="first_name"></td>
    <td><input type="text" name="rate"></td>
    <td><input type="number" name="st" class="time_input"></td>
    <td><input type="number" name="th" class="time_input"></td>
    <td><input type="number" name="dt" class="time_input"></td>
    <td><input type="number" name="ex_st" class="time_input"></td>
    <td><input type="number" name="ex_th" class="time_input"></td>
    <td><input type="number" name="ex_dt" class="time_input"></td>
  </tr>
</table>

<button id="add_new">Button</button>

Answer 2

将变量设为jQuery wrapped object，并在变量前加$前缀。它使得阅读代码更容易知道哪些变量是jQuery包装的。

var $add_button = $('#add_new');
var $blank_row = $('#blank_row');
var $time_table = $('#time_table');

请在下面的摘要中找到更多信息。

 $(document).ready(function() {
        var $add_button = $('#add_new');
        var $blank_row = $('#blank_row');
        var $time_table = $('#time_table');

        $add_button.click(function() {
            $blank_row.clone().appendTo($time_table);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Rate</th>
        <th class="time">ST</th>
        <th class="time">TH</th>
        <th class="time">DT</th>
        <th class="time">EX-ST</th>
        <th class="time">EX-TH</th>
        <th class="time">EX-DT</th>
    </tr>
    <tr id="blank_row">
        <td><input type="text" name="last_name"></td>
        <td><input type="text" name="first_name"></td>
        <td><input type="text" name="rate"></td>
        <td><input type="number" name="st" class="time_input"></td>
        <td><input type="number" name="th" class="time_input"></td>
        <td><input type="number" name="dt" class="time_input"></td>
        <td><input type="number" name="ex_st" class="time_input"></td>
        <td><input type="number" name="ex_th" class="time_input"></td>
        <td><input type="number" name="ex_dt" class="time_input"></td>
    </tr>
</table>

<button id="add_new">Button</button>