示例

代码

<!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. codevs——T1219 骑士游历

     http://codevs.cn/problem/1219/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Desc ...

  2. Chromium多线程模型设计和实现分析

    Chromium除了远近闻名的多进程架构之外,它的多线程模型也相当引人注目的.Chromium的多进程架构是为了解决网页的稳定性问题,而多线程模型则是为了解决网页的卡顿问题.为了达到这个目的,Chro ...

  3. C# SortedDictionary&lt;TKey, TValue&gt; 类

    表示依据键进行排序的键/值对的集合. https://msdn.microsoft.com/zh-cn/library/f7fta44c.aspx

  4. 问题： Unsupported major.minor version 51.0

    Unsupported major.minor version 51.0 问题原因:外部jar包使用jdk1.7(jdk7)编译,而使用此jar包的工程jdk版本为jdk1.6(jdk6),算是版本不 ...

  5. poj2750--Potted Flower(线段树)

    题目链接:点击打开链接 题目大意:给出n个数排成一个环.求环的最大连续子序列,不能是总序列 建一个线段树来求最大子序列假设仅仅是一个序列.那么求最大连续子序列非常easy,可是假设是一个环,那就要考虑 ...

  6. ADO.NET Entity Framework Extensions

    一.情景 如果你的项目中有返回多结果集的存储过程. 如果你的项目要和老项目中的ADO.Net共用事务. 如果你要动态的创建数据库的表. 但是你还是希望使用Entity Framework.那么继续往下 ...

  7. viz.js操作流程

    1.下载依赖的js文件,并引入 <script src="${root }/resources/js/graphviz/viz.js"></script> ...

  8. springAOP注解方式实现日志操作

    通过自定义注解调用方法执行日志存储: package com.zktx.platform.log2; import java.lang.reflect.Method; import java.util ...

  9. 在iOS开发中,我们会遇到十六进制和字符串之间相互转换,话不多说,直接上代码:

    //将十六进制的字符串转换成NSString则可使用如下方式: + (NSString *)convertHexStrToString:(NSString *)str { if (!str || [s ...

  10. redis实现计数--------Redis increment

    经理提出新的需求,需要知道每天微信推送了多少条模板消息,成功多少条,失败多少条,想到用Redis缓存,网上查了一些资料,Redis中有方法increment,测试代码如下 Controller imp ...