jquery table 拼接集合

1html:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>新增保养标准</title>

	</head>

<body>

    <form class="form-horizontal" id="addform"  >    <!--method="POST" action="$!{request.getContextPath()}/maintain_standard/add.htm"-->

            <div class="form-group">

                <label class="form-lable control-label">标准名称</label>

                <div class="form-line">

                    <input class="form-control" type="text" id="name" name="name" placeholder="请输入标准名称" />

                </div>

            </div>

            <div class="form-group">

                <label class="form-lable control-label">设备类型</label>

                <div class="form-line has-feedback">

                    <input class="form-control" type="text" id="deviceType" name="deviceType" placeholder="请选择设备类型"/>

                    <span class="glyphicon glyphicon-arrordown form-control-feedback"></span>

                </div>

            </div>

            <div class="form-group">

                <label class="form-lable control-label">类型细化</label>

                <div class="form-line has-feedback">

                    <input disabled="disabled" class="form-control" type="text" id="deviceTypeDetail" name="deviceTypeDetail" placeholder="请选择类型细化"/>

                    <span class="glyphicon glyphicon-arrordown form-control-feedback"></span>

                </div>

            </div>

            <div class="form-group">

                <label class="form-lable control-label">保养类型</label>

                <div class="form-line has-feedback">

                    <input class="form-control" type="text" id="maintainType" name="maintainType" placeholder="请选择保养类型"/>

                    <span class="glyphicon glyphicon-arrordown form-control-feedback"></span>

                </div>

            </div>

            <div calss="from-group">

               <a href="javascript:void(0)" class="" style="margin-left:50px" id="addMainContent" >添加保养内容+</a>   <a href="javascript:void(0)" class="" style="float:right;margin-right:14px;margin-left:20px">导入</a><a href="javascript:void(0)" class="" style="float:right">导出</a>

            </div>

            <div class="show_addMainContent" id="show_addMainContent" >

               <table class="table showContentTable"  id="showaddMainContentTable">

                <thead>

                   <tr>

                      <th>序号</th>

                     <th>保养内容</th>

                     <th>操作</th>

                 </tr>

               </thead>

               <tbody>

               </tbody>

              </table>

           </div>

        <!--操作按钮-->

        <div class="text-center" style="display:none">

            <button type="button" id="save" class="btn btn-success"  >保存</button>

            <input type="hidden" id="isOk" value="sure"/>

        </div>

    </form>

    <!--添加保养内容-->

    <div class="modal fade" id="myModal">

        <!-- 窗口的声明-->

        <div class="modal-dialog">

            <!--内容的声明-->

            <div class="modal-content">

                 <!--关闭按钮-->

                <button type="button" class="close" data-dismiss="modal" ><span>×</span></button>

                <div class="modal-header">添加保养内容</div>

                <div class="modal-body">

                   <div class="gorm-group">

                      <textarea rows="6" style="resize:none" class="form-control" placeholder="添加保养内容" id="myModal_content"/></textarea>

                   </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-success" id="myModal_sure" >确定</button>

                </div>

            </div>

        </div>

    </div>    

        <!--添加保养内容子项-->

    <div class="modal fade" id="myModalChild">

        <!-- 窗口的声明-->

        <div class="modal-dialog">

            <!--内容的声明-->

            <div class="modal-content">

                 <!--关闭按钮-->

                <button type="button" class="close" data-dismiss="modal" ><span>×</span></button>

                <div class="modal-header">添加保养内容子项</div>

                <div class="modal-body">

                   <div class="gorm-group">

                     <label>类型</label>

                     <select class="form-control" id="myModalChild_type">

                       <option selected>单选</option>

                       <option>多选</option>

                       <option>输入框</option>

                       <option>单选输入框</option>

                       <option>多选输入框</option>

                     </select>

                  </div>

                   <div class="gorm-group" id="myModalChild_parent_name">

                     <label>名称一</label><span style="color:red">*</span>

                     <input type="text" class="form-control" id="myModalChild_name"/>

                  </div>

                  <div class="form-group has-feedback">

                     <label>隐患等级</label>

                     <input type="text" class="form-control " placeholder="请选择隐患等级" id="drop_down" />

                     <input type="text" class="form-control " placeholder="隐患等级ID" id="drop_down_1" />

                     <span class="glyphicon glyphicon-arrordown form-control-feedback"></span>

                  </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-success" id="myModalChild_creat" type="button">创建</button>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript" src="$!{request.getContextPath()}/res/js/maintainstandard/add.js"></script>

</body>

</html>

　　2js

//var maintainstandard_count=0;//记录保养内容的条数

var thismaintainstandard_count=0;

var deviceTypeValue;//保存设备类型的值

$(function(){

	deviceTypeValue=$("#deviceType").val();

	$("#deviceType").cursor(getPublicDeviceType(),"deviceType");//设备类型

	$("#maintainType").cursor(getPublicMaintenanceTypes(),"maintainType");//保养类型

	  //监听设备文本的值是否发生了变化  发生变化就重新获取类型细化

	  setInterval(function(event){

	      if(deviceTypeValue !=$("#deviceType").val()){

	    	 $("#deviceTypeDetail").cursor(getPublicTypeElaboration($("#deviceType").val()),"deviceTypeDetail");//类型细化

	    	 deviceTypeValue=$("#deviceType").val();

	    	 $("#deviceTypeDetail").removeAttr("disabled");

	      }

	 },100);

	$("#drop_down").cursor(getPublicLevel(),"drop_down");//隐患等级

	var allTalbeTrIndex;

	var isAclickEnableChild=true;//添加保养内容子项是否可用

	//添加保养内容事件

	$("#addMainContent").click(function(){

			$("#myModal .modal-header").html("添加保养内容");

			$("#myModal").modal("show");

	});

	//创建保养内容

	$("#myModal_sure").click(function(){

		var value=$.trim($("#myModal_content").val());

		if(!value){alert("保养名称禁止为空！");return;}

		if($("#myModal .modal-header").html()=="编辑保养内容"){

		  $("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(1)").text(value);

		  $("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(2)").children("input").val(value);//将修改的值保存到input中

		}

		else{

		  $("#showaddMainContentTable").append("<tr><td></td> <td>"+value+"</td> <td><input type='hidden' value='"+value+"' id='content' name='content'/> <button type='button' class='btn btn-info btn-xs editChild' ><i class='fa fa-edit'></i> 编辑</button> <button type='button'  class='btn btn-info  btn-xs deleteChild'><i class='fa fa-trash'></i> 删除</button> <button type='button' class='btn btn-info  btn-xs addChild'><i class='fa fa-plus'></i> <span>添加子项</span></button></td></tr>");

		}

		$("#myModal").modal("hide");//

		$("#showaddMainContentTable").show();//显示隐藏的table层

		$("#myModal_content").val("");

		tableSort();

	});

	//删除保养内容

	$("#showaddMainContentTable").on("click",".deleteChild",function(){

		    allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引

			$(this).parent().parent().remove();

			var tableLength=$("#showaddMainContentTable tbody tr").length;

			for(var i=(allTalbeTrIndex);i<=tableLength;i++){

				//window.confirm($("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(0)").children("input").length+"-i-"+i+"--"+$("#showaddMainContentTable tbody tr").length);

				if($("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").children("td:eq(0)").children("input").length==1){

					$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").remove();

				}else{

					break;

				}

			}

			tableSort();//重新排序

	});

	//重新排序保养内容

	function tableSort(){

		var isChild=0;

		for(var i=1;i<=$("#showaddMainContentTable tbody tr").length;i++){

			if($("#showaddMainContentTable tbody tr:eq("+(i-1)+")").children("td:eq(0)").children("input").length==1){//如果是选项的话

				isChild++;

			}

			else{

				$("#showaddMainContentTable tbody tr:eq("+(i-1)+")").children("td:eq(0)").text(i-isChild);

			}

		}

	}

	//删除保养内容子项

	$("#showaddMainContentTable").on("click",".deleteChild_child",function(){//

		    allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引

		    $("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").remove();

	});

	//编辑保养内容

	$("#showaddMainContentTable").on("click",".editChild",function(){

		allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引

		$("#myModal_content").val($(this).parent().siblings("td:eq(1)").text());//获取保养内容

		$("#myModal .modal-header").html("编辑保养内容");//修改标题

		$("#myModal").modal("show");

	});

	//添加保养内容子项

	$("#showaddMainContentTable").on("click",".addChild",function(){

		allTalbeTrIndex=$(this).parent().parent().index();//保存点击的行的索引

		var selectOp="";

		if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(0)").children("input").val()=="no"){//	有子项

			var thisType=$("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(1)").children("input:eq(0)").attr("type");

			switch(thisType){

			  case  "radio":selectOp="<option>单选</option><option>单选输入框</option>" ;break;

			  case  "checkbox":selectOp="<option>多选</option><option>多选输入框</option>" ;break;

			  case  "text": selectOp="<option>输入框</option>";break;

			}

		}else{

			selectOp="<option>单选</option><option>多选</option><option>输入框</option><option>单选输入框</option><option>多选输入框</option>";

		}

 		$("#myModalChild_type").empty();

 		$("#myModalChild_type").html(selectOp);

		$("#myModalChild").modal("show");

	});

	//创建保养内容子项

	$("#myModalChild_creat").click(function(){

		var thisTableLength=$("#showaddMainContentTable tbody tr").legnth;//获取table的tr长度

		var content=$.trim($("#myModalChild_name").val());//名称

		var myModalChild_typeValue=$("#myModalChild_type option:selected").text();//获取复选框的值

		if(!content&&myModalChild_typeValue!="输入框"){alert("名称禁止为空！");return;}

		var type=$("#myModalChild_type option:selected").text();//类型

		var html="",htmlAll="";

		var htmlBtn="<button type='button'  class='btn btn-info  btn-xs deleteChild_child'><i class='fa fa-trash'></i> 删除</button><br/>"

		switch(type){

		case "单选": html="<input type='radio' name='"+allTalbeTrIndex+"' value='"+$("#drop_down_1").val()+"' checked id='name'/>"+content+"<br/>"; break;

		case "多选": html="<input type='checkbox' name='' value='"+content+"'/>"+content+"<br/>"; break;

		case "输入框": html="<input  class='form-control'type='text' /><br/>"; break;

		case "单选输入框": html="<input type='radio' name='"+allTalbeTrIndex+"' value='"+$("#drop_down_1").val()+"' checked/>"+content+"<input type='text' class='form-control' /><br/>"; break;

		case "多选输入框": html="<input type='checkbox' name='name' value='"+content+"'/>"+content+"<input type='text' class='form-control' /><br/>"; break;

		}

		if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").length==0){//没有子项

			htmlAll="<tr><td><input type='hidden' value='no'/> </td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";

			$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);

		}else{

			if($("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex+1)+")").children("td:eq(0)").children("input").val()=="no"){//	有子项	

				htmlAll="<tr><td><input type='hidden' value='no'/></td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";

				$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);

			}else{

				htmlAll="<tr><td><input type='hidden' value='no'/></td> <td>"+html+"</td> <td>"+htmlBtn+"</td></tr>";

				$("#showaddMainContentTable tbody tr:eq("+allTalbeTrIndex+")").after(htmlAll);

			}

		}

		$("#myModalChild").modal("hide");

		$("#save").removeAttr("disabled");//保存按钮可用

		isAclickEnableChild=true;//创建保养内容子项不可用

		$("#myModalChild_name").val("");

		//$("#showaddMainContentTable tbody tr:eq("+(allTalbeTrIndex)+")").children("td:eq(2)").children("button:eq(2)").children("span").text("编辑子项");//添加子项变为编辑子项

	});

	//添加子项复选框

	$("#myModalChild_type").change(function(){

		var myModalChild_typeValue=$("#myModalChild_type  option:selected").text();//

		if(myModalChild_typeValue=="输入框"){

			$("#myModalChild_parent_name").hide();

		}else{

			$("#myModalChild_parent_name").show();

		}

	});

	//保存

	$("#save").click(function(){

		var tableData2=new Array();//

		//遍历table获取保养内容选项

		var thisCount=0,thisContents=true;

		$("#isOk").val(thisContents);//保存是否执行保存的状态

		var tableTrLength=$("#showaddMainContentTable tbody tr").length;

		var tableCycle=0;

		//重写

		for(var i=0;i<tableTrLength;i++){

			var tableData1={};

			if($("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(0)").children("input").length==1){//如果是选项的话

				window.confirm("请完善保养内容");

			}//如果是标题

			else{

				if($("#showaddMainContentTable tbody tr:eq("+(i+1)+")").children("td:eq(0)").children("input").length<1){//如果是标题没有选项就提示

					window.confirm("请完善选项");thisContents=false;$("#isOk").val(thisContents);return;

				}

				else{

					  tableData1.content=$("#showaddMainContentTable tbody tr:eq("+i+")").children("td:eq(1)").text();//保存保养内容

					  tableData1.maintainStandardItem2s=new Array();

					  for(var j=(i+1);j<tableTrLength;j++){

					  //判断类型

					  if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="radio"){

						  //判断是单选 还是单选输入框

						  if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").length==1){//单选

							  tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").text(),"unsafeId":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"1"})

						  }else{//单选 输入框

							  tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").text(),"unsafeId":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"4"})

						  }

					  }else if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="checkbox"){//复选框

						  //判断是多选 还是多选输入框

						  if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").length==1){//单选

							  tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=checkbox]:eq(0)").val(),"resultType":"2"})

						  }else{//多选  输入框

							  tableData1.maintainStandardItem2s.push({"name":$("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input[type=radio]:eq(0)").val(),"resultType":"5"})

						  }

					  }else if($("#showaddMainContentTable tbody tr:eq("+j+")").children("td:eq(1)").children("input").attr("type")=="text"){//输入框

						  tableData1.maintainStandardItem2s.push({"resultType":"3"})

					  } 

					   if($("#showaddMainContentTable tbody tr:eq("+(j+1)+")").children("td:eq(0)").children("input").length==1){//如果他的下一个还是组选项子选项的话

							continue;

					     } else{

							  tableData2.push(tableData1);

							  i=j;

							  break;

						  }

					  }

				}

			}

		}

		$.each(tableData2,function(key,value){

			if(value.maintainStandardItem2s[0].resultType.length>0){

				 $.each(value.maintainStandardItem2s,function(key1,value1){

					 window.confirm(value.content+"--"+value1.name+"--"+value1.resultType);

				 })

			}else{

				window.confirm(value.content);

			}

		})

		var thisData={

				"name":$("#name").val(),//标准名称

				"deviceType":$("#deviceType").val(),//设备类型

				"deviceTypeDetail":$("#deviceTypeDetail").val(),//类型细化

				"maintainType":$("#maintainType").val(),//保养类型

				"maintainStandardItem1s":tableData2,

				}

    	  $.ajax({

 			 type: "post",

 			 url: "../maintain_standard/add.htm",

 			 dataType : 'json',

 			 contentType:'application/json',

 			 data:JSON.stringify(thisData),

 			 async:false,

 			 success: function(res){

 				 window.confirm(res.msg);

 			 },

 			 error: function(res){

 				 console.log(res);

 				 alert("操作失败");

 			 }

 		});

	});

})

jquery table 拼接集合的更多相关文章

jQuery 字符串拼接
jQuery 字符串拼接 // 字符串加变量拼接 $('#id 标签名[属性名="' + 变量 + '"]')
jQuery table td可编辑
参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...
jQuery && jEasyUI 扩展功能集合
jquery-extensions:jQuery && jEasyUI 扩展功能集合该扩展功能基于 jQuery 1.9.x / 1.10.x / 1.11.x 和 jQuery E ...
jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
jquery 元素选择器集合
一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...
Jquery Table 的基本操作
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个表格Table: table { border-collapse: ...
jquery table的隔行变色鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件二.具体应用代码 <body> &l ...
Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

随机推荐

python数据结构与算法——完全树与最小/大堆
# 完全树最小堆 class CompleteTree(list): def siftdown(self,i): """ 对一颗完全树进行向下调整,传入需要向下调整的节 ...
bootstrap-7
基础表单: 表单中常见的元素主要有:文本输入框.下拉选择框.单选按钮.复选按钮.文本框和按钮等. bootstrap并未对齐做太多的的定制化效果设计,仅仅对表单内的fieldset.legend.la ...
POJ-1743 Musical Theme(后缀数组)
题目大意:给一个整数序列,找出最长的连续变化相同的.至少出现两次并且不相重叠一个子序列. 题目分析:二分枚举长度进行判定. 代码如下: # include<iostream> # incl ...
Nginx-限制汇总
http块 limit_conn_zone $binary_remote_addr zone=connperip:10m; limit_conn_zone $server_name zone=conn ...
vue.js使用详解
1.什么是vue.jsvue.js是一款数据驱动型的js框架.何为数据驱动型?html视图层定义模板,vue定义数据.html和vue数据,通过标签id关联. 2.vue.js引入<script ...
android数据存储之Sqlite（二）
SQLite学习笔记前言:上一章我们介绍了sqlite的一些基本知识以及在dos命令下对sqlite进行的增删改查的操作,这一章我们将在android项目中实际来操作sqlite. 1. SQLit ...
Spring学习 Ioc篇（一）
一直以来忙于项目的开发,Spring虽然不用,一直想系统地学习一下,想看看它的源码,都没有时间,这段时间比较充裕,就索性先把Spring学习下,熟悉各个功能再去探究它内部的实现.就从Ioc篇开始学习. ...
【freemaker】之文本,html文本,去除空格,字母大小写,循环数组,字符串截取,map取值,遍历map
测试代码 @Test public void test06(){ try { root.put("emp", "<span color='red'>你好张三& ...
【转】JVM内存模型
http://longdick.iteye.com/blog/473866 图解JVM内存模型博客分类: JVM JVM活动SUN /** * 转载请注明作者longdick http:/ ...
Spring MVC入门知识总结
2．1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...

jquery table 拼接集合

jquery table 拼接集合的更多相关文章

随机推荐

热门专题