<!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. js自动时间

    function showTime() { //时间 nowtime = new Date(); year = nowtime.getFullYear(); month = nowtime.getMo ...

  2. C# 读取TXT文本数据 添加到数据库

    protected void Button1_Click(object sender, EventArgs e) { //使用FileStream读取文件 FileStream fileStream ...

  3. 【IDEA】关于idea开发工具使用

    idea这个开发工具有很强大的功能,然鹅有时候某些地方需要注意...(注明一下,我的版本2017.3.2因为不知道新版本有木有优化) 先说说建包,比如我在src下建了个com.xxxxx.test的包 ...

  4. forEach() 和 map() 遍历

    1.forEach()   没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项, i ...

  5. django后台对某些字段设置颜色

    在model.py的class函数中添加如下代码 #对签收状态设置颜色 def color_state(self): ': assign_state_name = '待签收' color_code = ...

  6. 缓存cache介绍

    1.  为何要用缓存.缓存的目的是为了什么?(https://my.oschina.net/u/3378039/blog/2986697) 一个程序的瓶颈在于数据库,内存的速度远远大于硬盘的速度,当我 ...

  7. gem 安装问题

    错误提示: ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) SSL_connect returned=1 errno=0 ...

  8. python requests库网页爬取小实例：亚马逊商品页面的爬取

    由于直接通过requests.get()方法去爬取网页,它的头部信息的user-agent显示的是python-requests/2.21.0,所以亚马逊网站可能会拒绝访问.所以我们要更改访问的头部信 ...

  9. Visual Studio连接Oracle数据库

    一.安装Oracle Developer Tools for Visual Studio 2015 其他的什么client一概不要装,装了的直接卸载. 下载时需要登录,如果之前已经注册账号,提醒一下密 ...

  10. 关于四种语言中substring()方法参数值的解析

    1.关于substring(a,b)Js var str="bdqn"; var result=str.substring(1,2); alert(result); 第一个参数:开 ...