js控制查看界面时不显示条框

一般我们的新建、查看、编辑的界面是同一个jsp ,那么就存在当进行查看时,input 框框的显示效果。现在的需求是:点击查看时, 界面不能显示input 框或者其他框框。

解决这个问题的我想到了两种方法:第一、将查看界面与编辑界面分开。第二、自己写js控制。

很懒不想去做界面的分开, 所有写了js 控制:

遍历: 

$("form[name="+formName+"]").find("input,select,textarea").each(function(){

var params = getElementDataPublic(formName,this);

value = params['value'];  //获得value

name = params['name'];  //获得name

// 判断是否name 是否有相同  indexOf()  是在字符串中进行检索 大小写敏感 表示有值

if(temp.indexOf(","+name+",") > -1){    return ;}else{temp += ","+name+",";}

if(name){    //wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)    

$(this).parents("td").wrapInner("<span name=\"span_"+name+"\" style=\"display: none\"></span>");

var html ="<div name='div_"+name+"' style=\"font-size:14px;color:#666;\">"+value+"</div>";

$("div[name='div_"+name+"']").remove(); $("span[name='span_"+name+"']").after(html); }

});

function getElementDataPublic(formName,obj){

var name,value;

if(obj.tagName == 'INPUT'){  // 判断元素的标签名是为 INPUT

 if(obj.type == 'text'){  //获得type 属性

 name = obj.name;  value = obj.value;

 }else if(obj.type == 'radio'){  // 单选按钮

 name = obj.name;   value = $("form[name='"+formName+"'] :radio[name='"+obj.name+"']:checked").next("label").text();

 }else if(this.type == "checkbox"){

 name = obj.name;  var tmp = new Array;

 $("form[name='"+formName+"'] :checkbox[name='"+obj.name+"'][checked]").each(function(){  tmp.push(this.value) });  value = tmp.join(",");  //join() 是指  根据指定的分隔符 分隔

}

}else if(obj.tagName == 'SELECT'){ name = obj.name;

if(obj.type=="select-one"){

value = $("form[name='"+formName+"'] select[name='"+obj.name+"'] option:selected").text();

   if('--请选择--' == value){value = "";}

}else{  value = $("form[name='"+formName+"'] select[name='"+obj.name+"'] option:selected").val().join(","); }

}else if(obj.tagName == 'TEXTAREA'){ name = obj.name; value = obj.value; }

return {name:name,value:value};

}

就是两个function ,时间原因就没有在简书上布局了,其思想就是 遍历form中下的table 中的input、select、textarea ,然后进行处理, 在遍历时,记录value和name,自己写的span 标签 把当前的元素进行包裹起来,并将span标签隐藏,  然后在重新写一个样式div 显示数据。wrapInner() 这个方法解释 :使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML) ,然后在用after 进行添加div显示。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,765评论 18 399
  • 一)jQuery九类选择器【参见jQueryAPI.chm手册】 目的:通过九类选择器,能定位web页面(HTML...
    奋斗的老王阅读 1,048评论 0 51
  • 导语:对于进入互联网+医疗的企业来说,如何通过免费挂号切入医药和医生资源,同时在商业保险和医药销售方面突破,从而实...
    创业邦阅读 9,310评论 0 1
  • 有生之年的梦想太多,随笔太多。可是时间又太少。很多时候我只能去想一会儿而无法把把记录下来。因为当我记录,开始动手动...
    喵喵不阿狸阅读 140评论 0 0