js 动态table crud -

dengwenjun

浏览: 214086 次
性别:
来自: 深圳

最近访客更多访客>>

belle-liang

bianrongxin

4348426qq163

273286251

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js 动态table crud

博客分类：

js
html

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="/WEB-INF/paginator.tld" prefix="paginator"%>
<%
    String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!doctype html>
<html>
<head>
<%@include file="/frame/libHeader.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="js/My97DatePicker/skin/WdatePicker.css" type="text/css"></link>
<script type="text/javascript" src="<%=path%>/js/plugin/My97DatePicker4.0/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path%>/js/js_map.js"></script></head>
<script type="text/javascript">
	//获取选择值
	$(function(){
		$("#checkAll").click(function(){
			$("input[name='tid']").attr("checked", this.checked); 
		});
	});
	function delCarType(tid)
	{
		if(confirm("你确定删除此信息吗？")){
			$.get("carTypeAction!delCarType.action?carType.tid="+tid,null,function(data){			
				if(data=="success"){
					location.href = location.href;
				}	
			});
		}
	}
	//$("#txt_title").focus();
	
	/********************表格操作******************************/		
	function saveRtInfo(obj,tid)
	{
		var tr=obj.parentNode.parentNode;		
		 // docusment.getElementById("carTypeName"+rowId).value;
		var carTypeName =tr.cells[0].childNodes[0].value;
		if(carTypeName=='' || carTypeName ==null)
		{
			alert('型号不能为空');
			tr.cells[0].childNodes[0].focus();			
			return;
		}		
		// document.getElementById("carDate"+rowId).value;
		var carDate=tr.cells[1].childNodes[0].value;

		if(carDate=='' || carDate ==null)
		{
			alert('年份不能为空');
			tr.cells[1].childNodes[0].focus();	
			return;
		}		
		//document.getElementById("displacement"+rowId).value;
		var displacement= tr.cells[2].childNodes[0].value;
		if(displacement=='' || displacement ==null)
		{
			alert('排量不能为空');
			tr.cells[2].childNodes[0].focus();
			return;
		}		
		if(!/^(\d+)[\.]+(\d+)|[0-9]$/.test(displacement))
		{	
			alert('输入数字非法!');
			tr.cells[2].childNodes[0].focus();
			return;
		}
		var url= '';		
		if(!tid)
		{
			url='saveCarType.action';
		}
		else
		{
			url='updateCarType.action';
			
		}
		var datas={
			'carType.carTypeName': carTypeName,
			'carType.carDate':carDate,
			'carType.displacement' : displacement,
			'carType.tid':tid?tid:'',
			'carType.carbid':$('#carbid').val(),
			'carType.csid' :$('#csid').val()
		};	
			
		$.ajax({
			url: "findByName.action?data="+new Date(),
			type: 'POST',
			dataType:'text',
			data : datas,
			async : false,
			success : function(data){				
				if(data=='true')
				{
					alert("该车系名称已存在!");
					return false;
				}
				else
				{
					$.ajax({
						url: url,
						type: 'POST',
						dataType:'text',
						data : datas,	
						success : function(data){
							if(data!='')
							{
								tr.cells[0].innerHTML=carTypeName;
								tr.cells[1].innerHTML=carDate
								tr.cells[2].innerHTML=displacement;					
								tr.cells[3].innerHTML='<a href="javascript:;" onclick="updateRowInfo(this,'+data+')"  title="修改">修改</a><a href="javascript:delCarType('+data+')"> 删除</a>' ;
							}
						},
						error: function(data){
							alert(falg==true?"添加失败!" : "修改失败!");
						}
					});
				}							
			},
			error: function(data){								
			}
		});		
		
		
	}
	
	//添加一行
	function addRowMx(obj) {		
		var newrow=carTypeTable.insertRow();
		var rowId= carTypeTable.rows.length-1;
		newrow.id =	rowId;				
		for(var i=0;i<4;i++){
			newrow.insertCell().className="td"+i
		}
		newrow.cells[0].innerHTML='<input type="text" maxlength="30" id="carTypeName'+rowId+'" name="carType.carTypeName" style="width: 200px;height: 20px"/><span id="carTypeNameDefaultTip" class="default-tip"></span><span id="carTypeNameTip"></span>';
		newrow.cells[1].innerHTML="<input type=\"text\" class=\"Wdate\" id='carDate"+rowId+"' name=\"carType.carDate\" onclick=\"WdatePicker({dateFmt:'yyyy',minDate:'1900',maxDate:'2099'})\" readonly=\"readonly\" />";
		newrow.cells[2].innerHTML='<input type="text" id="displacement'+rowId+'" name="carType.displacement" style="width: 150px;height: 20px"/>';
		newrow.cells[3].innerHTML='<a href="javascript:;" onclick="saveRtInfo(this)"> 保存</a><a href="javascript:;" onclick="deleteRow(this)"> 取消</a>';
    }
     //新建取消
    function deleteRow(obj)
    {
    	
    	var tr=obj.parentNode.parentNode;
    	//alert(tr.rowIndex);
		var tbody=tr.parentNode;		
		tbody.removeChild(tr);    	
    }
    
   var map = new Map();   
   function updateRowInfo(obj,tid)
   {
  		if(confirm("确认修改该信息吗?"))
  		{  
  					
  			var tr=obj.parentNode.parentNode;
 			var carTypeName=tr.cells[0].innerHTML; 
 			tr.cells[0].innerHTML='<input type="text" value="'+carTypeName+'"  style="width: 200px;height: 20px"/>';
 			var carDate=tr.cells[1].innerHTML; 			
 			tr.cells[1].innerHTML="<input type=\"text\" class=\"Wdate\" value='"+carDate+"'  onclick=\"WdatePicker({dateFmt:'yyyy',minDate:'1900',maxDate:'2099'})\" readonly=\"readonly\" />";
 			var displacement=tr.cells[2].innerHTML;
 			tr.cells[2].innerHTML='<input type="text" value="'+displacement+'" style="width: 150px;height: 20px"/>';
 			tr.cells[3].innerHTML='<a href="javascript:;" onclick="saveRtInfo(this,'+tid+')"> 保存</a><a href="javascript:;" onclick="resetRow(this,'+tid+')"> 取消</a>';
 			map.put(tid,carTypeName+","+carDate+","+displacement);
  		}
   }
   
   
  function resetRow(obj,tid)
  {
  		var datas=map.get(tid);
  		var stringArray =datas.split(","); 
  		var tr=obj.parentNode.parentNode;
		tr.cells[0].innerHTML=stringArray[0];
		tr.cells[1].innerHTML=stringArray[1];
		tr.cells[2].innerHTML=stringArray[2];
		tr.cells[3].innerHTML='<a href="javascript:;" onclick="updateRowInfo(this,'+tid+')" title="修改">修改</a><a href="javascript:delCarType('+tid+')"> 删除</a>' ;
  		map.remove(tid);  		
  }	
   
	
	
</script>
<body>	
	<div class="admin-bd">
  <!--内容区_s-->
  <div class="admin-con-data fn-clear">
      <form action="carSeriesAction!getCarBrandList.action" method="post" name="formQuery" id="formQuery">
     <div class="fn-left admin-r-con fn-clear">
     	<div class="admin-r-title"><p class="fn-right">
     	<!--
     	 <a href="carTypeAction!addCarTypePage.action?carType.carbid=${carType.carbid}&carType.csid=${carType.csid}" title="新建车型" class="admin-add-btn">新建车型</a>
     	 
     	<a href="<%=path %>/classify/addCarType.jsp?carbid=${carType.carbid}&csid=${carType.csid}" title="新增车型" class="admin-add-btn">新增车型</a>
     	 -->
     	 </p>
     	 <b class="b">当前位置：
     	 	<a  href="brandAction!getCarBrandList.action"> 汽车品牌</a>  >  
     	 	<a href="getCarSeriesList.shtml?seriesVo.bid=${carType.carbid}"> 查看车系</a>
     	 	 > 查看车型</b></div>
        <div class="member-table-data-list">
         <p class="admin-m-title">
			${carSeries.braName }  >  ${carSeries.csName }
		</p>
        <!--table 开始  -->
        	<table class="member-tables" id="carTypeTable">
            	<tr>
                	<!--  <th width="5%"><input type="checkbox" id="checkAll"/></th>-->
                    <th width="20%">型号</th>
                    <th width="10%">年份</th>               
                   <!--<th width="20%">汽车图片</th>-->
                    <th width="10%">排量</th>
                    <th width="10%">操作</th>                    
                </tr>                	
                <c:if test="${empty carCarTypeList}">
					<tr class="nonumber">
						<td colspan="4"><b class="redFont">对不起，没符合您要求的记录！</b></td>
					 </tr>
				</c:if> 
				<c:forEach items="${carCarTypeList}" var="carType" varStatus="s">
					<tr id="${s.count}">
						<!--  <td><input type="checkbox" name="tid"/></td>-->
		                <td>${carType.carTypeName}</td>
		                <td>${carType.carDate}</td>
		               <!--<td><img width='40' height='40' src='<%=path %>/${carType.carPhoto}'/></td>  -->
		                <td>${carType.displacement}</td>			              
		                <td>
		                	<a href="javascript:;" onclick="updateRowInfo(this,${carType.tid})" title="修改">修改</a>
		                	<a href="javascript:delCarType(${carType.tid})"> 删除</a> 
		                </td>
		             </tr>	
				</c:forEach>				                        
            </table>            
            <!--table 结束  -->
        </div>        
  		 <input type="hidden" id='carbid' value="${carType.carbid}" name="carType.carbid">
  		 <input type="hidden" id='csid'  value="${carType.csid}" name="carType.csid">  
  		 <br>
  		 <div>
  		 	   <a href="javascript:addRowMx()" title="新增车型" class="admin-add-btn">新增车型</a>
  		 </div>		 	
      	<div class="PageBar" id="allTeamsPageBar">
       		<paginator:page name="paginator" form="formQuery" action="/carSeriesAction!getCarBrandList.action" />
		</div>
     </div>
     </form>
  </div>
  <!--内容区_e-->
</div>
</body>
</html>

分享到：

Js实现Map对象 | EXT+ AJAX验证用户名是否存在

2013-04-27 17:36
浏览 1214
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 动态table crud

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 动态table crud

评论

发表评论

相关推荐

Math.round(Math.random() * 10000); //随机函数名

hi li 下拉菜单

HTML5表单及其验证

js弹出层代码(兼容多浏览器)

弹出div

ext img 选择

jquery 表单验证

input type='file'的值的清理

星标显示

js改变选择的行颜色

js实现表格选择行变色

table排序

html 选择图片显示

js 获得文件大小

all the way around

浏览器 跨域仿问

最近访客更多访客>>

浏览器跨域仿问