zoukankan      html  css  js  c++  java
  • jQuery替换常用标签

    使用jQuery替换HTML的常用标签,重组FORM的表单的HTML。

    /**
     * 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();
        /*原表单值 处理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();
            }
    
        });
        /*原表单值 处理图片 获取显示值替换标签*/
        $('#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));
        });
        //console.log( $('#hideWrap').html());
        /*获取图片,替换图片*/
        //var imgval = $('#formWrap .hiduploader img').attr('src');
        //var imgstr = '';
        //if (imgval != '') {
        //    imgstr += "<img alt='纸质版合同' src="+imgval+" class='img-reponsetive'>";
        //} else {
        //    imgstr += "<img alt='纸质版合同' src='/frame/public/assets/global/img/none.png' class='img-reponsetive'>";
        //}
        //$('#hideWrap .hiduploader').html();
        //$('#hideWrap .hiduploader').html(imgstr);
    
        /* 
         *
         * 循环遍历图片
         * 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);
    }
     
    觉得有收获,记得推荐一下哦!
    作者:楓羽靈~
    出处:http://520fyl.cnblogs.com/
    如果您觉得本文对您的学习有所帮助,可通过点击页面下方【好文要顶】支持博主。
  • 相关阅读:
    [USACO17JAN]Subsequence Reversal序列反转
    P1330 封锁阳光大学
    P1403 [AHOI2005]约数研究
    poj1456——Supermarket
    P1807 最长路_NOI导刊2010提高(07)
    P1137 旅行计划
    P1162 填涂颜色
    P1040 加分二叉树
    P1135 奇怪的电梯
    P1086 花生采摘
  • 原文地址:https://www.cnblogs.com/520fyl/p/5396236.html
Copyright © 2011-2022 走看看