div制作表格，增减表格

约定不等于承诺〃 2022-12-27 11:02 164阅读 0赞

div制作表格，增减表格

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>增添表格</title>
    		<style type="text/css">
    			.main{
        
    				border: 2px solid #898989;
    				width: 700px;
    			}
    			.main .row{
        
    				display:flex ;
    				justify-content: space-between;
    				border-top: 1px solid #898989;
    				border-bottom: 1px solid #898989;
    			}
    			.main .row div{
        
    				height: 60px;
    				line-height: 60px;
    				border-right: 1px solid #898989;
    			}
    			.main .row div:nth-of-type(1){
        
    				width: 70px;
    				display: flex;
    				justify-content: center;
    				align-items: center;	
    			}
    			.main .row div:nth-of-type(2){
        
    				flex-grow: 1;
    			}
    			.main .row div:nth-of-type(3){
        
    				width: 100px;
    			}
    			.main .row div:nth-of-type(4){
        
    				width: 100px;
    				text-align: center;
    			}
    			img{
        
    				width: 50px;
    				height: 50px;
    			}
    			.title{
        
    				text-align: center;
    				font-weight: bold;
    				background-color: #f0f0f0;
    			}
    		</style>
    		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    		<script type="text/javascript">
    			function addRow(){
        
    				var tag="";
    				tag +="<div class='row'>";
    				tag +="<div><img src='img/bike.jpg' /> </div>";
    				tag +="<div>小米生态企业九号多功能电动车</div>";
    				tag +="<div>￥4899.00</div>";
    				tag +="<div><input type='button' value='删除' οnclick='deleteRow(this)' /></div>";
    				tag +="</div>";
    				
    				$(".main").append(tag);
    			}
    			function clearAll(){
        
    				$(".row:first").siblings().remove();
    			}
    			function deleteRow(obj){
        
    				$(obj).parent().parent().remove();
    			}
    		</script>
    	</head>
    	<body>
    		<input id="addBtn" type="button" value="添加数据" onclick="addRow()"/>
    		<input id="addBtn" type="button" value="清空数据" onclick="clearAll()"/>
    		<br /><br />
    		<div class="main">
    			<div class="row">
    				<div class="title">产品</div>
    				<div class="title">名称</div>
    				<div class="title">价格</div>
    				<div class="title">操作</div>
    			</div>
    			<div class="row">
    				<div><img src="img/camera1.jpg" /></div>
    				<div>尼康D7500单反相机 尼克尔18-140mm</div>
    				<div>￥6499.00</div>
    				<div><input type="button" value="删除"onclick="deleteRow(this)" /></div>
    			</div>
    			<div class="row">
    				<div><img src="img/steering_wheel.jpg" /></div>
    				<div>科腾D74 900度游戏方向盘</div>
    				<div>￥408.00</div>
    				<div><input type="button" value="删除"onclick="deleteRow(this)" /></div>
    			</div>
    			<div class="row">
    				<div><img src="img/charger.jpg" /></div>
    				<div>个度智能车载支架 车载无线充电器</div>
    				<div>￥99.00</div>
    				<div><input type="button" value="删除"onclick="deleteRow(this)" /></div>
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70]: /images/20221120/e49a6bd95e00433887192140764983db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpc3Nfc2NhcmVjcm93_size_16_color_FFFFFF_t_70 1]: /images/20221120/561449949dbe468397106a6849ec2640.png