<!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. MySQL基础概述

    MySQL基础 1.目前属于Oracle 2.MySQL开源的关系型数据库管理系统 3.分为社区版和企业版 MySQL安装与配置 1.MSI安装 2.zip安装 MySQL目录结构 1.bin目录,存 ...

  2. 【MYSQL】MYSQLの環境構築

    ダウンロード:https://dev.mysql.com/downloads/mysql/ 手順① 手順② mysql.iniの設定について [mysql]default-character-set= ...

  3. mysql学习笔记--数据库多表查询

    一.内连接[inner join] 1. 语法一:select 列名 from 表1 inner join 表2 on 表1.公共字段=表2.公共字段 2. 语法二:select 列名 from 表1 ...

  4. hdu 3065 AC自动机 标记数组不清零

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3065 题目里面要我们计算每种单词出现的次数,重叠的也要计算,那么我们在查找的时候不要把标记单词结尾的 ...

  5. 虚拟网络学习笔记之一：VXLAN

    1. 什么是虚拟网络? 答:从架构角度考虑,我们可以采用与服务器虚拟化引入Hypervisor的方式一样,引入Nypervisor或者叫“虚拟网络管理平台”实现虚拟网络.虚拟网络必须像虚拟机一样,脱离 ...

  6. mysql数据库优化（转）

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...

  7. odoo qweb 记录

    默认的打印功能修改,比如在动作中的打印功能: 继承抽象模型 models.AbstractModel 重写 _get_report_values class PayslipDetailsReportI ...

  8. Spring+Quartz集群环境下定时调度的解决方案

    集群环境可能出现的问题 在上一篇博客我们介绍了如何在自己的项目中从无到有的添加了Quartz定时调度引擎,其实就是一个Quartz 和Spring的整合过程,很容易实现,但是我们现在企业中项目通常都是 ...

  9. 使用idea的springboot项目出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    参考: https://www.cnblogs.com/lfm601508022/p/InvalidBoundStatement.html https://blog.csdn.net/xsggsx/a ...

  10. 分析easyswoole3.0源码，服务启动为例（一）

    swoole已经升级到4了,主要的特性是更好的支持协程,easyswoole也为了更好支持协程推出了es3.我本地环境是php7.2.9 centos7 在github下载最新的3.0的demo.地址 ...