zoukankan      html  css  js  c++  java
  • Jquery动态添加/删除表格行和列

    <!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>
    

      

  • 相关阅读:
    PHP学习九--会话控制session和cookie
    PHP学习八--正则表达式
    PHP学习六--类和对象
    PHP学习五--函数
    PHP学习四--数组
    《30天自制操作系统》day08——鼠标控制与32位模式切换
    java 中 静态块的作用
    学习(一)
    asp中 grideview 更新 无法获取值 解决办法
    ASP.NET中的GridView自带的编辑更新功能
  • 原文地址:https://www.cnblogs.com/lusufei/p/9583566.html
Copyright © 2011-2022 走看看