如果老板们感觉很抽象 B站 小安小安la 附视频详解 希望对老板们有用！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
<style type="text/css">
body {
font-size: 13px;
line-height: 25px;
}
table {
border-top: 1px solid #333;
border-left: 1px solid #333;
width: 300px;
}
td {
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.center {
text-align: center;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>//*********
$(function(){
$(".btn1").click(function(){
let name=$("#bookName").val();
let num=$("#bookPrice").val();//获取文本框的内容
let td=$("<tr><td>"+name+"</td><td>"+num+"</td></tr>")//将获取的内容更改为节点的样式
$("table").append(td);//将添加的内容添加到table最后
})
$(".btn2").click(function(){
$("table tr:eq(2)").remove();//移除选定的一行的所有元素
})
$(".btn3").click(function(){
$("#row1").siblings().find("td:eq(0)").css("color","red")//修改标题颜色
})
$(".btn4").click(function(){
let tr=$("table tr:last").clone();
$("table").append(tr)//克隆最后一行，并且添加在最后
})
})
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>60个瞬间</td>
<td class="center">¥32.00</td>
</tr>
</table>
<fieldset>
<legend>实现如下按钮功能</legend>
<label>书名：</label><input type="text" id="bookName"/>
<label>价格：</label><input type="text" id="bookPrice"/>
<p>
<input class="btn1" name="b1" type="button" value="增加一行" onclick="addRow()" />
<input class="btn2" name="b2" type="button" value="删除第2行" onclick="delRow()" />
<input class="btn3" name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
<input class="btn4" name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
</p>
</fieldset>
</body>
</html>
