zoukankan      html  css  js  c++  java
  • jQuery替换HTML模板

        今天做项目需要将表单的HTML用jQuery替换以字符串的形式存入数据库,以下是本人写js脚本文件所整理的思路,仅供参考!

      一、首先要将常用的HTML标签统一替换,如:select,input等

      二、特殊的标签要做特殊处理,如input的单选,img图片等等

    实例代码:

    /**
     * Created by bayayun on 2016/3/28.
     * 模板替换
     */
    function copyForm(el) {
        /*获取表单的HTML代码*/
        var form = $(el).html();
        $('#hideWrap').html('');
        $('#hideWrap').html(form);
        $("input[name='_ajax']","#hideWrap").remove();
        /*替换单选框*/
        var rideo = $("input[type='radio']", el);
        $("#hideWrap input[type='radio']").each(function (s){
            var rad = $(rideo[s]).is(":checked");
            if(rad){
                /*删除当前节点除外的所有兄弟节点的父级节点*/
               $(this).closest('label').siblings().remove();
               $(this).closest('span').remove();
            }
        });
        //console.log($('#hideWrap').html());
        /*原表单值 处理input*/
        var source = $('input', el);
        $('#hideWrap input').each(function (i) {
            var inputval = $(source[i]).val();
            var type = $(this).attr('type');
            /*如果input的type属性是隐藏就删除*/
            if(type !== 'hidden'){
                var str = '';
                if (inputval != '') {
                    str += "<span>" + inputval + "</span>";
                } else {
                    str += "<span>&nbsp;&nbsp;</span>";
                }
                $(this).replaceWith($(str));
    
            }else{
                $(this).remove();
            }
    
        });
        //console.log($('#hideWrap').html());
        /*原表单值 处理图片 获取显示值替换标签*/
        $('#hideWrap .form-actions').remove();
        /*处理联动select*/
        $('#hideWrap .mcSelect').each(function(){
            $(this).replaceWith($(this).html());
        });
        /*原表单值 处理select 获取select option:select 显示值*/
        var seled = $('select option:selected', el);
        var selects = $('select', el);
        $('#hideWrap select').each(function (e){
            var selval = $(selects[e]).val();
            var sel = '';
            if(selval){
                var seledval = $(seled[e]).text();
                if(seledval){
                    sel += "<span>" + seledval + "</span>";
                }
            }else{
                sel += "<span>&nbsp;&nbsp;</span>";
            }
            $(this).replaceWith($(sel));
        });
        /*原表单值 处理textarea 获取显示值替换标签*/
        var textar = $('textarea',el);
        $('#hideWrap textarea').each(function (d){
            var textval = $(textar[d]).val();
            var texts = '';
            if(textval){
                texts += "<p>" + textval + "</p>";
            }else{
                texts += "<p>&nbsp;&nbsp;</p>";
            }
            $(this).replaceWith($(texts));
        });
    
        /* 
         *
         * 循环遍历图片
         * author wyh
         * */
        var imgval = '';
        var imgstr = '';
        $('#hideWrap .hiduploader img').each(function(){
          if (typeof($(this).attr('alt')) !== 'undefined') {
            imgval = $(this).attr('src');
            if (imgval != '') {
              imgstr = "<div class='thumbnail'> <img alt='"+$(this).attr('alt')+"' src="+imgval+" class='img-reponsetive'></div>";
            } else {
               imgstr = "<img alt='' src='/frame/public/assets/global/img/none.png' class='img-reponsetive'>";
            }
            $(this).closest('.hiduploader').html(imgstr);
          }
        });
    
        var formhtml = $('#hideWrap').html();
        $("input[name='formhtml']", el).val(formhtml);
    }
  • 相关阅读:
    面向对象程序设计课第五次作业
    面向对象程序设计课第三次作业
    MeasureSpec 解析
    JavaWeb学习总结(一)JavaWeb入门与Tomcat
    Redis GetTypedClient
    Visual Studio Entity Framework (EF) 生成SQL 代码 性能查询
    EF 连接MySQL 数据库  保存中文数据后乱码问题
    VS2015 +EF6 连接MYSQL数据库生成实体
    WebConfig 自定义节点configSections配置信息
    docker菜鸟入门
  • 原文地址:https://www.cnblogs.com/520fyl/p/5443361.html
Copyright © 2011-2022 走看看