<!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. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1 有了安装Jira的经验, 这次再安装conflue ...

  2. select 选择列表传值问题

    <select> <option value ="volvo">Volvo</option> <option value ="s ...

  3. windows下vmware配置nat网络

    linux学习需要配置网络,可以选择桥接网络,nat网络地址转换. 由于linux的服务,众多需要配置一个固定的ip,因此可以选择静态ip配置. 因此在这里自定义nat网络地址转换,可以固定一台lin ...

  4. 使用其他分支替换master分支

    在提交混乱的时候, 导致master分支和远程仓库完全一致的时候,这时候解决这种问题可以创建一个新的分支, 再合并到master分支, 像这样: git checkout seotweaks git ...

  5. jdbc访问pipelinedb

    建立Stream及视图 pipeline.execute("create stream caesar(name text,info json);") #创建stream,字段nam ...

  6. Python学习—框架篇之初识Django

    什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的W ...

  7. Leetcode中sort排序遇到的一些问题

    class Solution { public: static bool cmp(vector<int>a,vector<int>b) { ]-a[]<b[]-b[]; ...

  8. Lombok快速入门

    Lombok是简化开发的jar包 借用老师的图来说明

  9. ROC AUC

    1.什么是性能度量? 我们都知道机器学习要建模,但是对于模型性能的好坏(即模型的泛化能力),我们并不知道是怎样的,很可能这个模型就是一个差的模型,泛化能力弱,对测试集不能很好的预测或分类.那么如何知道 ...

  10. 关于element-ui resetFields

    上周换到新项目组,依然是vue,不过是搭配element-ui. 这两天开始用el-form,发现了个问题. 就是我的表单确定提交之后,需要重置表单,一开始我没看熟API,直接将form对象手动赋成初 ...