<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>表格添加行列</title>

	</head>

	<body>

		<table>

			<tbody id="test">

			</tbody>

		</table>

		<table style="display: none;">

			<tbody id="modo">

				<tr>

				</tr>

			</tbody>

		</table>

		<button id="add_row">添加行</button>

		<button id="add_col">添加列</button>

		<button id="get_str">提取str</button>

		<input type="text" id="dele_row_text" /><button id="dele_row">删除行</button>

		<input type="text" id="dele_col_text" /><button id="dele_col">删除列</button>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script>

			//var a = $("#test").children().length;

			//alert(a)

			$("#add_row").click(add_row)

			$("#add_col").click(add_col)

			$("#get_str").click(get_str)

			$("#dele_row").click(dele_row)

			$("#dele_col").click(dele_col)

		/*	test1()

			function test1(){

				var str = "1,2,3,4,5|7,8,9,10,11|12,13,14,15,16";

				var a = str.split('|');

				alert(a.length);

				var b = a[1].split(',');

				alert(b.length);

			}*/

			function add_row() { //添加行方法

				var mode_tr = $("#modo tr:first").clone();

				$("#test").append(mode_tr);

				f5_click()

			}

			function add_col() { //添加列方法

				var tr = $("tr"); //所有tr元素

				$("tr").each(function(index) {

					var td = $("<td>updata</td>").addClass("td_up");

					//td.click(up)

					$(this).append(td)

				})

				f5_click()

			}

			function get_str() { //提取内容

				var str="";

				var trLen = $("#test tr").length;

			    for(var i = 0;i<trLen;i++){

			    	var tr = $("#test").find("tr").eq(i);//获取每一行tr

			    	var tdLen = $(tr).find("td").length;

			    	for(var j = 0;j<tdLen;j++){

			    		td=$(tr).find("td").eq(j);//获取每行td

			    		str = str+$(td).text()+","

			    	}

			    	str = str+"|"//换行

			    }

				return str;

			}

			function dele_row() {

				var row = $("#dele_row_text").val();

				row = row - 1;

				var tr = $("#test tr:eq(" + row + ")");

				if(!confirm("确定要删除" + $(tr).find("td").eq(0).text() + "这一行？")) {

					return false

				}

				$(tr).remove();

			}

			function dele_col() {

				var col = $("#dele_col_text").val();

				col = col - 1;

				var tr = $("tr");

				$.each(tr, function(index) {

					if(index == 0) {

						if(confirm("确定要删除" + $(this).find("td").eq(col).text() + "这一列？") == 0) {

							return false;

						}

					}

					$(this).find("td").eq(col).remove()

				});

			}

			function f5_click() {

				$(".td_up").bind('click', function() {

					$(this).text("aaa")

				})

			}

		</script>

	</body>

</html>

　　

Jquery动态添加/删除表格行和列的更多相关文章

  1. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  2. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  3. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  4. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  5. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  6. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  7. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  8. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

  9. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

随机推荐

  1. linux上部署jenkins步骤小记

    一.部署jdk环境 1.下载jdk包,解压,放在选定的位置,我本次jdk包放置在“/usr/local/java/jdk” 目录下 2.配置环境变量 1)打开/etc/profile文件,在命令框中输 ...

  2. Nagios监控

    1.Nagios监控软件 Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警 ...

  3. Django启动报错笔记

    NO.1: You have 15 unapplied migration(s). Your project may not work properly until you apply the mig ...

  4. xml嵌套防止解析

    举个例子 <?xml version="1.0" encoding="UTF-8"?><Messages><Message typ ...

  5. Java框架spring 学习笔记（一）：SpringBean、ApplicationContext 容器、BeanFactory容器

    Spring容器是Spring框架的核心,容器可以创建对象并创建的对象连接在一起,配置和管理他们的整个生命周期.Spring 容器使用依赖注入(DI)来作为管理应用程序的组件,被称为 Spring B ...

  6. C#使用Mutex实现单例应用程序

    不少应用程序有单一实例的需求,也就是同时只能开启一个实例(一般也就是一个进程). 实现的方式可能有判断进程名字,使用特殊文件等等,但是最靠谱的方式还是使用系统提供的 Mutex 工具. Mutex是互 ...

  7. poj2182（线段树求序列第k小）

    题目链接:https://vjudge.net/problem/POJ-2182 题意:有n头牛,从1..n编号,乱序排成一列,给出第2..n个牛其前面有多少比它编号小的个数,记为a[i],求该序列的 ...

  8. Mybatis之批量操作

    首先批量操作的优点是:大大的提高查询的效率. 举个简单的例子:如果在程序中遍历来执行sql的话,这种情况就是有多少行数据就要执行多少条sql,这样导致的效率将是非常低. 如下可能需要40s inser ...

  9. appium三种等待时间

    1.强制等待(固定等待) 2.隐式等待 是appium中webdriver中自带的休眠方法,设置的是全局等待时间(在全局等待时间内之间的响应操作都会立即结束等待,然后进行操作) 3.显式等待

  10. php 微信自定义分享接口

    <?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appS ...