zoukankan      html  css  js  c++  java
  • jq操作table追加td

    示例

    代码

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Title</title>
    		<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    	</head>
    	<style type="text/css">
    		.well {
    			font-weight: 600;
    			position: relative;
    			height: 22px;
    		}
    		.add {
    			margin-left: 15px;
    			position: absolute;
    			cursor: pointer;
    		}
    	</style>
    	<body>
    		<table style="100%;border: 1px solid #ccc;" border="1" cellspacing="0" cellpadding="6" id="table1">
    			<tr>
    				<td align="center">1day</td>
    				<td align="center" class="well">景点 <span class="add">+</span></td>
    				<td align="center" rowspan="5">小计</td>
    			</tr>
    		</table>
    	</body>
    	<script>
    		$(document).ready(function() {
    			$(".add").click(function() {
    				$(this).parents('tr').after('<tr><td class="well"></td></tr>');   //1,追加tr
    				var num = $(this).parent().prev().attr('rowspan') ? $(this).parent().prev().attr('rowspan') : //2,判断第一个td有没有rowspan的属性
    				$(this).parent().prev().attr('rowspan', num + 1);  //左侧的
    				$(this).parent().next().attr('rowspan', num + 1); //右侧的
    			})
    		})
    	</script>
    </html>
    
  • 相关阅读:
    nodejs
    httpClient closeableHttpClient
    re(正则表达式)模块
    ConfigParser模块
    random和string模块
    常用文件操作模块json,pickle、shelve和XML
    time和datetime模块
    os、sys和shutil模块
    内建函数
    生成器、迭代器、装饰器
  • 原文地址:https://www.cnblogs.com/lml-lml/p/10430211.html
Copyright © 2011-2022 走看看