示例

代码

<!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. __call__ 和 __str__ 魔术方法

    魔术方法,在python中,是通过触发的形式调用,之所以称为魔术方法,是因为不需要特地的打印或调用它,在某些特定的时候,他会自己调用,所谓的特定的时候,也是我们自己所输入的代码操作的,不是莫名其妙的触 ...

  2. （37）Spring Boot集成EHCache实现缓存机制【从零开始学Spring Boot】

    [本文章是否对你有用以及是否有好的建议,请留言] 写后感:博主写这么一系列文章也不容易啊,请评论支持下. 如果看过我之前(35)的文章这一篇的文章就会很简单,没有什么挑战性了. 那么我们先说说这一篇文 ...

  3. fzu 2138

    //假设n个人每个人都做对了两道题,那么要想获奖人数最少的话,那么做题数目肯定最多即全做对的,中间可能会小于零那么没有获奖的 #include<stdio.h> int main() { ...

  4. C#--excel操作控件--interop是什么

    这个是微软出的操作excel的类库,为什么这个比NPOI的下载量少这么多?

  5. Cloud Foundry中DEA与warden通信完毕应用port监听

    在Cloud Foundry v2版本号中,DEA为一个用户应用执行的控制模块,而应用的真正执行都是依附于warden. 更详细的来说,是DEA接收到Cloud Controller的请求:DEA发送 ...

  6. HTTP缓存和CDN缓存

    一 http缓存 1.1缓存的分类: http中具有缓存功能的是:1.浏览器缓存.  2.缓存代理服务器. 1.2 什么是缓存: http缓存的是指:当Web请求抵达缓存时, 如果本地有“已缓存的”副 ...

  7. ZOJ3629 Treasure Hunt IV（找规律，推公式）

    Treasure Hunt IV Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice is exploring the wonderland ...

  8. 编程基础知识——C++能不能支持Java和ObjC的反射？

    C++能不能支持Java和ObjC的反射? 要回答这个问题.首先我们要清楚什么是反射.什么是反射? 教科书的解释我就不说了,(^o^)事实上我也记不得.实际开发应用的反射就是在没有某个类型的头文件或者 ...

  9. Hadoop-2.2.0中文文档——Apache Hadoop 下一代 MapReduce (YARN)

    MapReduce在hadoop-0.23中已经经历了一次全然彻底地大修.就是如今我们叫的MapReduce 2.0 (MRv2) or YARN. MRv2的基本思想是把JobTracker分成两个 ...

  10. 院校-国外-美国：斯坦福大学（ Stanford）

    ylbtech-院校-国外-美国:斯坦福大学( Stanford) 斯坦福大学(Stanford University),全名小利兰·斯坦福大学(Leland Stanford Junior Univ ...