示例

代码

<!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="width: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>

jq操作table追加td的更多相关文章

  1. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  2. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. jq 操作table

    转载于:http://www.jb51.net/article/34633.htm jquery获取table中的某行全部td的内容方法,需要的朋友可以参考一下   <table>< ...

  4. 关于jq操作table下多个type=radio的input的选中

    假如有2个table: <table id="table1" border="0"> <tr> <td><input ...

  5. jQuery操作table tr td

    1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("h ...

  6. JQ 获取Table的td 值

    <script type="text/javascript"> function SetTable() { $("#myTab table").ea ...

  7. jq 获取table元素，ajax 静态填加数据

    知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...

  8. 关于checkbox操作 table

    引入 Validform验证 <script type="text/javascript">          //添加操作       crrTrTdCkId=1;  ...

  9. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

随机推荐

  1. python网络编程系列

    计算机基础 网络基础 套接字 socket模块 TCP协议和UDP协议 struct 模块简介 struct 模块解决 TCP黏包问题 socket 客户端的认证 socketserver模块初识 客 ...

  2. Spring Cloud-hystrix(六)

    作用 防止 多个服务相互交互时某个服务运行缓慢导致调用方线程挂起,高并发情况下 导致挂起线太多 引起调用方的服务不可用 能够在服务发生故障或者通过断路器监控向调用方返回一个错误 而不是长时间的等待 S ...

  3. 在tomcat上全手工部署Servlet3.0

    从头写java文件的方式,编译成CLASS文件,加强对SERVLET容器的理解. 稍后试试JAR和WAR包. 文件内容(跟以前用IDE的一样): HelloServlet.java: package ...

  4. NYOJ 一笔画问题 欧拉路

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...

  5. 【bzoj1001】【狼抓兔子】

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MB Submit: 12719 Solved: 3017 [Submit][ ...

  6. nginx源代码分析--进程间通信机制 &amp; 同步机制

    Nginx源代码分析-进程间通信机制 从nginx的进程模型能够知道.master进程和worker进程须要通信,nginx中通信的方式有套接字.共享内存.信号.对于master进程,从外部接受信号, ...

  7. [BZOJ 3387] Fence Obstacle Course

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3387 [算法] f[i][0]表示从第i个栅栏的左端点走到原点的最少移动步数 f[i ...

  8. 【POJ 3700】 Missile Defence System

    [题目链接] http://poj.org/problem?id=3700 [算法] 对于每一枚导弹,有4种决策 : 1.新建一套递增的系统拦截它 2.新建一套递减的系统拦截它 3.在已经建好的递增拦 ...

  9. SwiftUI 官方教程（六）

    6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row  ...

  10. python之路——迭代器和生成器

    阅读目录 楔子 python中的for循环 可迭代协议 迭代器协议 为什么要有for循环 初识生成器 生成器函数 列表推导式和生成器表达式 本章小结 生成器相关的面试题 返回顶部 楔子 假如我现在有一 ...