示例

代码

<!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. VS2015 C++ 获取 Edit Control 控件的文本内容，以及把获取到的CString类型的内容转换为 int 型

    UpdateData(true); //读取编辑框内容,只要建立好控件变量后调用这个函数使能,系统就会自动把内容存在变量里 //这里我给 Edit Control 控件创建了一个CString类型.V ...

  2. （24）Spring Boot环境变量读取和属性对象的绑定【从零开始学Spring Boot】

    凡是被Spring管理的类,实现接口 EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的变量. com. ...

  3. 设置Jmeter默认中文页面

    下载安装好Jmeter后默认的是英文,对于我这种学渣来说简直就是受到了1000000点攻击. 所以,如何把英文界面换成中文呢? 方法一(从网上看到的) 启动Jmeter找到 options >c ...

  4. javascript的函数、创建对象、封装、属性和方法、继承

    转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...

  5. POJ 3130

    这题,加了精度错了,不加精度反而对了... #include <iostream> #include <cstdio> #include <cstring> #in ...

  6. mysql选择上一条、下一条数据记录，排序上移、下移、置顶

    1.功能须要 完毕列表排序上移,下移,置顶功能.效果例如以下图所看到的: 2设置思路 设置一个rank为之间戳,通过选择上移,就是将本记录与上一条记录rank值交换,下移就是将本条记录与下一条记录ra ...

  7. 求int型数据在内存中存储时1的个数

    1.求int型数据在内存中存储时1的个数 输入一个int型数据,计算出该int型数据在内存中存储时1的个数. 我们非常easy想到例如以下方法: #include <iostream> u ...

  8. DRP——重定向与转发

    重定向 重定向就是又一次进行请求.第一次请求.容器推断请求的类型,是否须要重定向. 重定向的语句是"response.SendRedirect("index.jsp"); ...

  9. mybits 操作指南

    第一.一对一: <resultMap type="com.zktx.platform.entity.tb.Module" id="BaseResultMap&quo ...

  10. [Oracle] Oracle终极解锁

    一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长时间不释放,有时实在没办法,只好重启数据库.现在提供一种方法解决这种问题,那就是在ORACLE中杀不 ...