JS：使用jQuery修改表格

安何言兮

已于 2024-06-03 18:08:29 修改

阅读量1.2k

点赞数

文章标签： jquery javascript 前端

于 2021-11-15 16:06:12 首次发布

本文链接：https://blog.csdn.net/qq_50906590/article/details/121336752

版权

如果老板们感觉很抽象 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">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;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>

安何言兮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS：使用jQuery修改表格

如果老板们感觉很抽象 B站小安小安la 附视频详解希望对老板们有用！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>练习</title> <style type="text/css"> body { font-size: 13px; line-height: 25px; } tabl
复制链接

扫一扫