<body>
<table border="1px">
<tr>
<td>年级</td>
<td>性别</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><button class="a">删除</button></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td><button class="a">删除</button></td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td><button class="a">删除</button></td>
</tr>
</table>
<button class="b">添加</button>
</body>
<script src="../week four/jquery-3.4.1.js"></script>
<script>
$('body').on('click','.b',function(){
$('table').append('<tr><td>1</td><td>2</td><td>3</td><td><button class="a">删除</button></td></tr>')
});//点击添加按钮的动态事件，在table内部尾端添加新的tr
$('body').on('click','.a',function(){
$(this).parents('tr').remove();
});//点击删除按钮的动态事件，删除掉此条tr
$('body').on('click','td',function() {
var text = $(this).text();
$(this).html('<input type="text">');
$(this).children().val(text);
});//点击td框的动态事件，创建文本框来输入内容
$('body').on('click','input',function(){
return false;
});//阻止默认行为(如链接)，防止冒泡
$('body').on('blur','input',function(){
var val = $(this).val();
$(this).parent().text(val);
});//鼠标移开编辑的文本框后，将文本框的内容传递给父级元素，即td
</script>