实训任务

动态表格

假设有一个表格，代码如下：

<table>
    <thead>
        <tr>
            <th>栏目一</th>
            <th>栏目二</th>
            <th>栏目三</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>栏目一数据1</td>
            <td>栏目二数据1</td>
            <td>栏目三数据1</td>
            <td><a href="#" class="remove">删除</a></td>
        </tr>
        <tr>
            <td>栏目一数据2</td>
            <td>栏目二数据2</td>
            <td>栏目三数据2</td>
            <td><a href="#" class="remove">删除</a></td>
        </tr>        
    </tbody>
</table>
<a href="#" id="add">增加一行</a>

请编写Javascript代码完成如下功能：

• 每点击表格下方的"增加一行"链接一次，即为表格新增一行
• 点击每行的删除链接，即将当前行从表格中删除

允许对上述html代码做适当修改

扩展一

以上述表格为例，如果在每行的操作栏增加一个"编辑"链接或按钮，当点击时，即可实现当前行的更改功能。如果由你实现该功能，请给出你的实现思路。

扩展二

在个人项目中，增加一个动态节点增删改的功能，譬如：

• 在博文列表页的各项中，增加删除按键，点击可将该博文移除
• 在博文列表下方，增加一个博文输入表单与提交按键，点击提交，则将新博文附加到列表中
• 在博文列表页的各项中，增加修改按键，点击后， 则该博文出现在下方表单中，修改后点击提交，将更新原博文