题目：

使用jQuery实现可以动态添加数据的表格，如图所示：

输入完成数据点击添加，可以将数据追加到表格最后一行。点击表格中的删除，可以删除本行的数据。

思路：

一.添加：

1. 给添加按钮绑定单击事件

2. 获取文本框的内容

3. 创建td，设置td的文本为文本框的内容。

4. 创建tr

5. 将td添加到tr中

6. 获取table，将tr添加到table中

二.删除：

1.确定点击的是哪一个超链接

<a href="javascript:void(0);" onclick="delTr(this);" >删除</a>

2.怎么删除？

removeChild():通过父节点删除子节点

实现步骤：

01基础HTML代码和CSS代码
HTML代码如下：

<div id="app">
  <div>
    <input type="text" id="id" placeholder="请输入编号" />
    <input type="text" id="name" placeholder="请输入姓名" />
    <input type="text" id="gender" placeholder="请输入性别" />
    <input type="button" value="添加" id="btn_add" />
  </div>
  <table>
    <caption>
      明星信息一览表
    </caption>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>1</td>
      <td>刘德华</td>
      <td>男</td>
      <td>
          <a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>张学友</td>
      <td>男</td>
      <td>
        <a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
       </td>
    </tr>
    <tr>
      <td>3</td>
      <td>郭富城</td>
      <td>男</td>
      <td>
        <a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
      </td>
    </tr>
  </table>    
</div>

CSS代码如下：

table {
  border: 1px solid;
  margin: auto;
  width: 600px;
  border-collapse: collapse;
}

td, th {
    text-align: center;
    border: 1px solid;
  }
div {
  text-align: center;
  margin: 50px;
}

02JavaScript代码

document.getElementById("btn_add").onclick = function () {
  //2.获取文本框的内容
  var id = $("#id").val();
  var name = $("#name").val();
  var gender = $("#gender").val();

  //获取table
  var table = $("table");

  //追加一行
  table.html( table.html() +
    "<tr>\n" +
    "        <td>" +
    id +
    "</td>\n" +
    "        <td>" +
    name +
    "</td>\n" +
    "        <td>" +
    gender +
    "</td>\n" +
    '        <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>\n' +
    "    </tr>");
};

//删除方法
function deleteTr(obj) {
  var table = obj.parentNode.parentNode.parentNode;
  var tr = obj.parentNode.parentNode;

  table.removeChild(tr);
}