示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格行之增删改</title>
<!--编辑功能在s5中并没有被实现，在该s5_new中被实现了-->
<style>
.hide{
display: none;
}
.mantle{
position: fixed;
/*必须用position: fixed;不然遮罩层显示不出来*/
top: 0;
left: 0;
right:0;
bottom: 0;
/*上下左右四个都为0，是为了把遮盖层覆盖到整个窗口上*/
background-color: black;
opacity: 0.6;
/*透明度*/
z-index: 9;
}
.lotus{
position: fixed;
/*必须用position: fixed;不然遮罩层显示不出来*/
top: 50%;
left: 50%;
/*两个50%保证荷花框（自己取的名字）的左上顶点在窗口的正中*/
300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
/*通过外边距将荷花框移到窗口的正中间*/
background-color: #eeeeee;
z-index: 10;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>城市</th>
<th>特产</th>
<th>美景</th>
<!--th是指表格表头，要加粗-->
</tr>
</thead>
<tbody id="tb">
<tr id="tr1">
<td target="city">武汉</td>
<td target="food">热干面</td>
<td target="beauty">黄鹤楼</td>
<td class="edit">编辑</td>
<td class="del">删除</td>
<!--td指表格的单元格，正常字体显示即可-->
</tr>
<tr id="tr2">
<td target="city">海口</td>
<td target="food">清补凉</td>
<td target="beauty">骑楼</td>
<td class="edit">编辑</td>
<td class="del">删除</td>
</tr>
<tr id="tr3">
<td target="city">重庆</td>
<td target="food">火锅</td>
<td target="beauty">洪崖洞</td>
<td class="edit">编辑</td>
<td class="del">删除</td>
</tr>
</tbody>
</table>
<input type="button" value="添加" id="add">
<div class="lotus hide">
<div>
<input type="text" id="city">
</div>
<div>
<input type="text" id="food">
</div>
<div>
<input type="text" id="beauty">
</div>
<input type="button" value="确定" id="con">
<input type="button" value="取消" id="can">
</div>
<div class="mantle hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
var isedit = false;
// 设置荷花框（模态对话框）出现原因的标记，默认为非
var modifying_tr_id;
// 声明待修改<tr>标签的id
// 可以用delegate对未来元素造成影响，但是我不会用。。
$('.edit').click(function () {
$('.lotus').removeClass('hide');
$('.mantle').removeClass('hide');
isedit = true;
// 对模态对话框产生的原因是否为“编辑”进行标记（不为“编辑”的话肯定就是“添加”所产生的了）
modifying_tr_id = $(this).parent().attr('id');
// 获取需要编辑行所对应标签的id值
$(this).prevAll().each(function () {
var td_text = $(this).text();
var tar = $(this).attr('target');
$('#'+tar).val(td_text)
})
// 将原表格某行的信息传到荷花框的输入框中，以待修改
});
// $('.del').on('click',function () {
// var c = confirm("你确定要删除吗？");
// if (c){
// $(this).parent().remove();
// }
// });
// 该函数无法对后来的增加的表格行进行删除操作，据说不用click关联而用delegate进行关联可以实现，但我试了却并未成功
$('.del').click(function () {
var c = confirm("你确定要删除吗？");
if (c){
$(this).parent().remove();
}
});
// 该事件实现的是：荷花框的确认键被按下后，先根据isedit判断是否为编辑操作，若是，则通过待修改的<tr>标签的id值找到
// 该标签并进行innerHTML内容的修改，修改完毕后应将isedit重置为false，以免影响以后的操作；若不是，则为添加操作导致
// 的荷花框出现，可以首先通过DOM操作创建一个<tr>标签，然后修改该<tr>标签的innerHTML内容，之后再将其追加入<tbody>
// 标签中即可
$('#con').click(function () {
var c = $('#city').val();
var f = $('#food').val();
var b = $('#beauty').val();
if (isedit){
$('#'+modifying_tr_id)[0].innerHTML='<tr id="tr2">
' +
// 对于$()，括号中的只需要是字符串即可，所以上局只需要写成$('#'+modifying_tr_id)即可
// 至于加后缀[0]，是为了将jQuery对象转换为DOM对象以便获取
' <td>'+c+'</td>
' +
' <td>'+f+'</td>
' +
' <td>'+b+'</td>
' +
' <td class="edit">编辑</td>
' +
' <td class="del">删除</td>
' +
' </tr>';
isedit=false;
}else {
var tr = document.createElement('tr');
tr.innerHTML='<tr id="tr2">
' +
' <td>'+c+'</td>
' +
' <td>'+f+'</td>
' +
' <td>'+b+'</td>
' +
' <td class="edit">编辑</td>
' +
' <td class="del">删除</td>
' +
' </tr>';
$('#tb').append(tr);
// 表示<tr>会成为$('#tb')的子标签，而非下一个兄弟标签！！
}
$('.lotus :text').val('');
$('.lotus').addClass('hide');
$('.mantle').addClass('hide');
});
$('#can').click(function () {
$('.lotus').addClass('hide');
$('.mantle').addClass('hide');
if(isedit){
isedit = false;
}
var wo = $('.lotus :text').val("");
});
$('#add').click(function () {
$('.lotus').removeClass('hide');
$('.mantle').removeClass('hide');
$('.lotus :text').val("");
// 执行添加操作时，为方便用户操作，需要先将荷花框中的所有输入框清空
})
</script>
</body>
</html>