制作动态表单相关参考 jquery

最新推荐文章于 2021-06-03 07:49:01 发布

flying1188

最新推荐文章于 2021-06-03 07:49:01 发布

阅读量174

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/flying1188/article/details/82751387

版权

js学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

制作动态表单相关参考 jquery

实现代码

<html>
<head>
<!-- 引入jquery开发包 -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function(){
    // 提交按钮添加 click事件
    $("#addBtn").click(function(){
        
        // 获取form的值
        var name = $("input[name='name']").val();
        var email = $("input[name='email']").val();
        var phone = $("input[name='phone']").val();
        
        // 在table 中生成tr 
        var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");
        $("table").append(tr);
        
        // form重置，清除刚才表单填写的内容
        $("form")[0].reset();
    });
});

// 删除
function deleteItem(a){
    // 删除 a 元素所在行 
    $(a).parents("tr").remove();
}
</script>
</head>

<body>
    <div align="center">
        <h3>添加用户</h3>
        <form>
            姓名 <input type="text" name="name" />
            邮箱 <input type="text" name="email" />
            电话 <input type="text" name="phone" /> <br/>
            <input type="button" value="提交" id="addBtn" />
        </form>
        <hr/> 
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>email</th>
                <th>电话</th>
                <th>删除</th>
            </tr>
        </table>
    </div>
</body>
</html>

jquery load 方法回显数据

load() 方法的作用是可以通过 AJAX 请求从服务器加载数据，并把返回的数据直接放置到指定的元素中。

该方法使用起来非常简单，大大简化了ajax开发

语法 ： jQuery对象 . load(url, param ,callback);

url 访问服务器地址 
param 发送给服务器参数 
callback 当正常返回后 执行回调函数

注意：如果 param存在，以POST方式请求， 如果param 不存在，以GET方式请求

示例
1、基本使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入jquery开发包 -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function test() {
       //发送ajax请求，并将返回的响应结果直接赋给div
        $("#mydiv").load("servlet/test1",{"str":"你很好","str2":"你很坏"});
    }
</script>
</head>
<body>
    <button onclick="test();">点我</button>
    <div id="mydiv">初始内容</div>
</body>
</html>


2、callback使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入jquery开发包 -->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function test() {
       //发送ajax请求，并将返回的响应结果直接赋给div
        $("#mydiv").load("servlet/test1",{"str":"你很好","str2":"你很坏"},function(data){
            //回调函数里面的内容
            alert(data);
        });
    }
</script>
</head>
<body>
    <button onclick="test();">点我</button>
    <div id="mydiv">初始内容</div>
</body>
</html>

注意：回调函数在load填充完数据了之后执行

项目代码实例：

    $('#myform').form('load', { // 调用load方法把所选中的数据load到表单中,非常方便
        customerCommisonType : detail.customerCommisonType,
        customerCommison : detail.customerCommison,
        otherPay : detail.otherPay,
        otherPay01 : detail.otherPay01,
        otherPay02 : detail.otherPay02,
        otherPay03 : detail.otherPay03,
        otherPay04 : detail.otherPay04,
        otherPay05 : detail.otherPay05,
        otherPay06 : detail.otherPay06,
        otherPay07 : detail.otherPay07,
        otherPay08 : detail.otherPay08,
        otherPay09 : detail.otherPay09,
        otherPay10 : detail.otherPay10,
        otherPay11 : detail.otherPay11,
        otherPay12 : detail.otherPay12,
        isAudit : detail.audit,
        isPriority : detail.isPriority,
        remarks : detail.remarks
    });
}

将后台JSON数据填充Form表单

    return this.each(function(){
        var formElem, name;
        if(data == null){this.reset(); return; }
        for(var i = 0; i < this.length; i++){  
            formElem = this.elements[i];
            //checkbox的name可能是name[]数组形式
            name = (formElem.type == "checkbox")? formElem.name.replace(/(.+)\[\]$/, "$1") : formElem.name;
            if(data[name] == undefined) continue;
            switch(formElem.type){
                case "checkbox":
                    if(data[name] == ""){
                        formElem.checked = false;
                    }else{
                        //数组查找元素
                        if(data[name].indexOf(formElem.value) > -1){
                            formElem.checked = true;
                        }else{
                            formElem.checked = false;
                        }
                    }
                break;
                case "radio":
                    if(data[name] == ""){
                        formElem.checked = false;
                    }else if(formElem.value == data[name]){
                        formElem.checked = true;
                    }
                break;
                case "button": break;
                default: formElem.value = data[name];
            }
        }
    });
};

//调用方式：$(“#formId”).populateForm(data);

将form中的元素序列化成对象；序列化对象填充到指定input

//正向， 表单到对象：
sy.serializeObject = function(form) {
	var o = {};
	$.each(form.serializeArray(), function(index) {
		if (o[this['name']]) {
			o[this['name']] = o[this['name']] + "," + this['value'];
		} else {
			o[this['name']] = this['value'];
		}
	});
	return o;

//反向，对象填充到input

sy.serializeObject = function(form) {
	var o = {};
	$.each(form.serializeArray(), function(index) {
		if (o[this['name']]) {
			o[this['name']] = o[this['name']] + "," + this['value'];
		} else {
			o[this['name']] = this['value'];
		}
	});
	return o;