<!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. 吴裕雄 python 机器学习——线性判断分析LinearDiscriminantAnalysis

    import numpy as np import matplotlib.pyplot as plt from matplotlib import cm from mpl_toolkits.mplot ...

  2. python学习Day11 函数的参数列表

    复习 什么是函数? 具体特定功能的代码块 - 特定功能代码作为一个整体,并给该整体命名,就是函数 函数的优点 : 1.减少代码的冗余,2.结构清晰,可读性强 3.具有复用性,开发效率高,维护成本高 如 ...

  3. material palette

    https://www.materialpalette.com/

  4. BAT机器学习面试1000题系列

    https://blog.csdn.net/sinat_35512245/article/details/78796328

  5. mysql学习笔记--遇到的坑

    一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...

  6. 编写一个lambda,接受两个int,返回它们的和

    void counter(int i, int b) { auto count = [i,b]{ return i + b; }; cout<< count(); } int main() ...

  7. Python学习笔记5程序的控制结构

    1.分支结构 (1)单分支结构 (2)二分支结构 (3)多分支结构 条件判断 (4)程序的异常处理 2.实例:身体质量指数BMI 思路一(国内,稍作修改就是国际): 思路二: height,weigh ...

  8. 2018-2019-2 20165315《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 20165315<网络对抗技术>Exp2 后门原理与实践 一.实验任务 使用netcat获取主机操作Shell,cron启动 使用socat获取主机操作Shell, ...

  9. CMakeLists 的使用，大型工程使用cmake 的构件过程

    CMakeLists 的使用,大型工程使用cmake 的构件过程 CMakeLists_1 PROJECT(hello_2) cmake_minimum_required(VERSION 2.8) # ...

  10. Spring Scheduled定时任务报错 java.lang.IllegalStateException: Encountered invalid @Scheduled method 'xxx': For input string: "2S"

    报错信息如下: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'ding ...