示例

代码

<!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. mysql deadlock、Lock wait timeout解决和分析

    项目上线 线上遇到大量的deadlock 和wait timeout 但是看程序没什么问题 问dba也不能给出很好的解决方案!最终自己去了解mysql锁 以及看mysq锁日志 如果了解mysql锁的机 ...

  2. Git .gitignore文件忽略

    Git .gitignore文件忽略 学习了:http://blog.csdn.net/yonnangel/article/details/50115059 http://www.cnblogs.co ...

  3. Python学习笔记13：标准库之子进程（subprocess包）

    ubprocess包主要功能是运行外部的命令和程序.从这个意义上来说,subprocess的功能与shell类似. subprocess以及经常使用的封装函数 当我们执行python的时候,我们都是在 ...

  4. Narrow Art Gallery

    Time Limit: 4000ms, Special Time Limit:10000ms, Memory Limit:65536KB Total submit users: 11, Accepte ...

  5. Spark Streaming源代码学习总结(一)

    1.Spark Streaming 代码分析: 1.1 演示样例代码DEMO: 实时计算的WorldCount: import org.apache.spark.streaming.{Seconds, ...

  6. git的经常使用命令

    $ git config --global user.name "姓名" $ git config --global user.email "xxx@qq.com&quo ...

  7. EularProject 36：2进制和10进制回文数

    华电北风吹 天津大学认知计算与应用重点实验室 完毕日期:2015/7/29 Double-base palindromes Problem 36 The decimal number, 585 = 1 ...

  8. poj 1018(枚举+贪心）

                                                                              通讯系统 We have received an o ...

  9. NET中的池

    NET中的各种池 在.NET中,常用到的池有四个:字符串拘留池.线程池 .应用程序池.数据库连接池. 字符串拘留池 在.NET中字符串是不可变对象,修改字符串变量的值会产生新的对象.为降低性能消耗及减 ...

  10. H3BPM表单设计器公式设计参考

    表单设计器公式设计参考 整体说明 Ø 公式以javascript方式解析,最终支持JS语法或计算方式: Ø 公式变量以数据项为主,以{}符号表示数据项,例如数据项A,表示为{A}:如果是子表中的数据项 ...