JQuery 对表单进行初始化操作

提供一种如果前台页面标签比较多,如果挨个初始化的话可能会比较繁琐,这时候我们可以将后台传递的数据组装为json串,前台用jquery将代码初始化到表单中。

function loadData(jsonStr) {
          //  alert(jsonStr.toString())
            var obj = eval("(" + jsonStr + ")");
            var key, value, tagName, type, arr;
            for (x in obj) {
                key = x;
                value = obj[x];
                try
                {
                   // alert($("#ProDes").val());
                    //alert($("[id=‘ProDes‘]").val() = "111");
                    $("[id=‘" + key + "‘]").each(function () {
                    //$("[name=‘"+key+"‘],[name=‘"+key+"[]‘]").each(function(){
                        tagName = $(this)[0].tagName;

                        type = $(this).attr(‘type‘);
                        if (tagName == ‘INPUT‘) {
                            if (type == ‘radio‘) {
                                $(this).attr(‘checked‘, $(this).val() == value);
                            } else if (type == ‘checkbox‘) {
                                arr = value.split(‘,‘);
                                for (var i = 0; i < arr.length; i++) {
                                    if ($(this).val() == arr[i]) {
                                        $(this).attr(‘checked‘, true);
                                        break;
                                    }
                                }
                            } else {
                                $(this).val(value);
                            }
                        } else if (tagName == ‘SELECT‘ || tagName == ‘TEXTAREA‘) {
                            $(this).val(value);
                        }
                        else if(tagName == ‘SPAN‘) {
                            ///如果是lable的话

                           // alert(tagName)
                            $(this).html(value);
                        }

                    });
                }
                catch(e){}
            }
        }
时间: 2024-10-05 05:19:47

JQuery 对表单进行初始化操作的相关文章

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

jquery对表单元素的取值和赋值

/*获得text的值*/ var textval =$("#text_id").attr("value"); //或者 var textval =$("#text_id").val(); /*获取单选按钮的值*/ var valraio =$("input[type=raio]:checked").val(); /*获取一组名为items的radio被选中项的值*/ var item =$('input[name=items]

第5章 jQuery对表单、表格的操作及更多应用

本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 ——文本框.密码框(password),隐藏域,多行文本域(textarea),复选框(checkbox),单选框(radio),下拉框(select)文件上传框 (3)表单按钮 ——提交按钮(submit).复位(reset),一般按钮(button) 1.单行文本框(input type="tex

jQuery对表单、表格的操作及更多应用(中:表格应用)

内容摘录自锋利的JQuery一书 二.表格应用 1 表格隔行变色(:odd和:even选择器 P157) $(function(){$("tr:odd").addClass("odd"); //奇数行添加样式$("tr:even").addClass("even"); //偶数行添加样式(:odd和:even选择器中索引从0开始)}) 2 设定含有指定文字内容的某一行变色(:contains选择器 P158) $(functi

jQuery对表单、表格的操作及更多应用(上:表单应用)

内容摘录自锋利的JQuery一书 一.表单应用 1 获取和失去焦点改变样式(P142) $(function(){$(":input").focus(function(){ //获取焦点触发事件$(this).addClass("focus"); //增加样式}).blur(function(){ //失去焦点触发事件$(this).removeClass("focus"); //移除样式});}) 2 多行文本框触发事件改变文本框高度(P144

jQuery对表单元素的取值和赋值操作代码

使用常规的思路:$(“#keyword”).value 取值是取不到的,因为此时$(‘#keydord’)已经不是个element,而是个jquery对象,所以应该使用:$(“#keyword”).val() $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval

jQuery对表单、表格的操作及更多应用

<head> <style type="text/css"> .even {     background-color: #fff38f;/*偶数行样式*/ } .odd {    background-color: #dcdcdc;/*奇数行样式*/ } .selected {   background-color: #ff4136; }table{    width: 50%;} </style><script type="tex

jQuery对表单、表格的操作及更多应用(下:其他应用)

内容摘录自锋利的JQuery一书 三.其他应用  1 网页字体大小控制(P164) <span class="bigger">放大</span><span class="smaller">缩小</span><p id="para"></p> $(function(){$("span").click(function(){var thisEle = $(&q

jQuery对表单的操作

表单的组成部分:表单标签.表单域.表单按钮 <form><fieldset><legend><label><input><textarea> 1.单行文本框--获取和失去焦点改变样式 当文本框获取焦点后,它的颜色有变化:失去焦点后恢复为原来的样式,可使用css中的伪类选择符实现该功能 CSS代码: input:focus,textarea:focus{ border:;background:; } 问题:IE6不支持除了超链接元素外的