使用jquery创建表格，添加、删除行

     最近搞前端，某页面功能中需要动态添加和删除表格行。

     比较常用的场景是通过一个添加按钮添加表格行，每一行都有一个删除按钮进行删除。

     谷歌了一下找到一个示例代码挺适合新手学习使用的。

     效果如下：

             

     HTML代码如下：

<label>Please indicate the number of attendees in your group including yourself.
    <select id="participants" class="input-mini required-entry">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
    </select></label>

<table class="table table-hover" id="participantTable">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Name</th>
      <th>Year</th>
    </tr>
  </thead>
  <tr class="participantRow">
    <td>&nbsp;</td>
    <td><input name="" id="" type="text" placeholder="Name" class="required-entry">
    </td>
    <td>
      <select name="" id="" class="required-entry">
                    <option value=""></option>
                </select>
    </td>
    <td><button class="btn btn-danger remove" type="button">Remove</button></td>
  </tr>
  <tr id="addButtonRow">
    <td colspan="4">
      <center><button class="btn btn-large btn-success add" type="button">Add</button></center>
    </td>
  </tr>
</table>

     JS代码如下：

/* Variables */
var p = $("#participants").val();
var row = $(".participantRow");

/* Functions */
function getP() {
  p = $("#participants").val();
}

function addRow() {
  row.clone(true, true).appendTo("#participantTable");
}

function removeRow(button) {
  button.closest("tr").remove();
}
/* Doc ready */
$(".add").on('click', function() {
  getP();
  if ($("#participantTable tr").length < 17) {
    addRow();
    var i = Number(p) + 1;
    $("#participants").val(i);
  }
  $(this).closest("tr").appendTo("#participantTable");
  if ($("#participantTable tr").length === 3) {
    $(".remove").hide();
  } else {
    $(".remove").show();
  }
});
$(".remove").on('click', function() {
  getP();
  if ($("#participantTable tr").length === 3) {
    //alert("Can't remove row.");
    $(".remove").hide();
  } else if ($("#participantTable tr").length - 1 == 3) {
    $(".remove").hide();
    removeRow($(this));
    var i = Number(p) - 1;
    $("#participants").val(i);
  } else {
    removeRow($(this));
    var i = Number(p) - 1;
    $("#participants").val(i);
  }
});
$("#participants").change(function() {
  var i = 0;
  p = $("#participants").val();
  var rowCount = $("#participantTable tr").length - 2;
  if (p > rowCount) {
    for (i = rowCount; i < p; i += 1) {
      addRow();
    }
    $("#participantTable #addButtonRow").appendTo("#participantTable");
  } else if (p < rowCount) {}
});

      心得：

         1、珍爱生命，远离百度。

         2、如果涉及到多张表需要动态添加、删除行，只需要根据不同的表格ID进行操作即可，代码只写一遍。

         3、有些事情想起来可能有些复杂，但一旦开始付诸行动，step by step, 你会发现其实挺简单的。