87,909
社区成员
发帖
与我相关
我的任务
分享请教高手动态生成表单的格式排版问题
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
</style></head> <style type="text/css">
body{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
ul{margin:0;padding:0;list-style:none;}
a{margin-left:5px;color:#07F;text-decoration:none;}
a:hover{text-decoration:underline;}
input{border:1px solid #ccc;margin:2px;}
table{border-collapse:collapse;border-spacing:0;}
td{margin:0;padding:10px;border:1px solid #ccc;}
.STYLE1 {font-size: 18px}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#demo1").easyinsert();//最简单的应用
$("#demo2").easyinsert({
name: ["demo2", "demo2"],//可以同时添加两个（或更多），name值相同也必须分开设置，name数组的长度就是每组input的个数。type、value、maxlength、className四种属性，若同组组员的设置一样，可以只设置一次。
value: ["默认值2-1", "默认值2-2"],//可以给同组input分别设置默认值
maxlength: 15,//每组input的maxlength都一样，无需使用数组
className: ["demo2_class1", "demo2_class2"],//不用我解释了吧
toplimit: 5,//可以添加组数上限（默认是0，表示无上限），它是总管，so，name相当于小组组长
initValue: [//初始化的时候，各input的value就是归它管，必须是数组
["初始值2-1", "初始值2-2"]
]
});
$("#demo3").easyinsert({
name: "demo3",
toplimit: 2,
initValue: [
["初始值3-1"],//必须是数组，就算每组只有一个input
["初始值3-2"],
["初始值3-3"]//小三儿，别想蒙混过关，总管只允许添加两组
]
});
$("#demo4").easyinsert({
name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"],
type: ["text", "radio", "password", "checkbox", "file", "button"],
value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"]
});
$("#demo5").easyinsert({//type新增custom和select
name: ["location", "name", "content", "workload","material","type","unit","quantity","price","totalPrice","materialPrice","other","projectClass","repairDept","remark"],
type: ["text", "text", "text", "text","text","text","text","text","text","text","text","text","text","text","text"],
value: ["测试", "", "", "","","","","","","","","","","",""]
//initValue: [
//["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论a': '1', '技能a': '2', '上机a': '3' }],
//["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">类型：</strong>", { '理论b': '1', '技能b': '2', '上机b': '3' }]
//]
});
});
/**
* EasyInsert 4.0
* http://IlikejQuery.com/EasyInsert
*
* @Creator wo_is神仙 <jsw0528@MrZhang.net>
* @Depend jQuery 1.4+
**/
;(function($){
$.fn.extend({
"easyinsert": function(o){
o = $.extend({
//触发器
clicker: null,//根据class（或id）选择，默认.next()获取
//父标签
wrap: "li",
name: "i-text",
type: "text",
value: "",
maxlength: 20,
className: "i-text",
//新增上限值
toplimit: 0,//0表示不限制
//初始化值，二维数组
initValue: null//用于修改某资料时显示已有的数据
}, o || {});
var oo = {
remove: "<a href=\"#nogo\" class=\"remove\">移除</a>",
error1: "参数配置错误，数组的长度不一致，请检查。",
error2: "参数配置错误，每组初始化值都必须是数组，请检查。"
}
//容器
var $container = $(this);
var allowed = true;
//把属性拼成数组（这步不知道是否可以优化？）
var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className);
//arr ==> [name, type, value, maxlength, className]
var arr = new Array();
$.each(arrCfg, function(i, n){
if ( $.isArray(n) ) {
arr[i] = n;
} else {
arr[i] = new Array();
if ( i === 0 ) {
arr[0].push(n);
}else{
//补全各属性数组（根据name数组长度）
$.each(arr[0], function() {
arr[i].push(n);
});
}
}
//判断各属性数组的长度是否一致
if ( arr[i].length !== arr[0].length ) {
allowed = false;
$container.text(oo.error1);
}
});
if ( allowed ) {
//获取触发器
var $Clicker = !o.clicker ? $container.next() : $(o.clicker);
$Clicker.bind("click", function() {
//未添加前的组数
var len = $container.children(o.wrap).length;
//定义一个变量，判断是否已经达到上限
var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
if ( !isMax ) {//没有达到上限才允许添加
var $Item = $("<"+ o.wrap +">").appendTo( $container );
$.each(arr[0], function(i) {
switch ( arr[1][i] ) {
case "select"://下拉框
var option = "";
$.each(arr[2][i], function(i, n) {
option += "<option value='"+ n +"'>"+ i +"</option>";
});
$("<select>", {
name: arr[0][i],
className: arr[4][i]
}).append( option ).appendTo( $Item );
break;
case "custom"://自定义内容，支持html
$Item.append( arr[2][i] );
break;
default://默认是input
$("<input>", {//jQuery1.4新增方法
name: arr[0][i],
type: arr[1][i],
value: arr[2][i],
maxlength: arr[3][i],
className: arr[4][i]
}).appendTo( $Item );
}
});
$Item = $container.children(o.wrap);
//新组数
len = $Item.length;
if ( len > 1 ) {
$Item.last().append(oo.remove);
if ( len === 2 ) {//超过一组时，为第一组添加“移除”按钮
$Item.first().append(oo.remove);
}
}
$Item.find(".remove").click(function(){
//移除本组
$(this).parent().remove();
//统计剩下的组数
len = $container.children(o.wrap).length;
if ( len === 1 ) {//只剩一个的时候，把“移除”按钮干掉
$container.find(".remove").remove();
}
//取消“移除”按钮的默认动作
return false;
});
}
//取消触发器的默认动作
return false;
});
//初始化
if ( $.isArray(o.initValue) ) {//判断初始值是否是数组（必需的）
$.each(o.initValue, function(i, n) {
if ( !$.isArray(n) ) {
$container.empty().text(oo.error2);
return false;
}else{
if ( n.length !== arr[0].length ) {
$container.empty().text(oo.error1);
return false;
}
}
var arrValue = new Array();
//初始值替换默认值
$.each(n, function(j, m) {
arrValue[j] = arr[2][j]
arr[2][j] = m;
});
$Clicker.click();
//默认值替换初始值
$.each(arrValue, function(j, m) {
arr[2][j] = m;
});
//上面这种[移形换位法]不知道效率怎么样，我想不出别的更好的方法
});
}else{
$Clicker.click();
}
}
}
});
})(jQuery);
</script>
<script language="javascript" type="text/javascript" src="../DatePicker/WdatePicker.js"></script>
<%/* if(Validator.isAdminOrManager((String)session.getAttribute("name")));
else response.sendRedirect("../index.jsp"); */
%>
<body>
<form method="post" action="test.jsp">
<div align="center"><img src="../images/logo.gif"></div>
<div align="center"><jsp:include page="navigation.jsp" /></div>
<table width="92%" border="1" align="center">
<tr align="center">
<td width="6%" rowspan="2">装置或地点</td>
<td width="6%" rowspan="2"><p>项目名称、位号</p>
<p>规格型号</p></td>
<td width="20%" rowspan="2">项目主要内容</td>
<td width="5%" rowspan="2">工程量</td>
<td colspan="5">所需备件材料</td>
<td colspan="3">计划资金（万元）</td>
<td width="6%" rowspan="2">项目类别</td>
<td width="6%" rowspan="2">检修单位</td>
<td width="7%" rowspan="2">备注</td>
</tr>
<tr>
<td width="5%" height="83" align="center">备件/材料</td>
<td width="7%" align="center">规格型号</td>
<td width="4%" align="center">单位</td>
<td width="4%" align="center">数量</td>
<td width="6%" align="center"><p>计划单价</p>
<p>（万元）</p></td>
<td width="4%" align="center">合计</td>
<td width="7%" align="center">备件/材料费</td>
<td width="7%" align="center">人工及其它</td>
</tr>
</table>
<% String[] values=request.getParameterValues("demo2");
if(values!=null){
for(int i=0;i<values.length;i++){
System.out.println(UtilClass.codeChanger(values[i]));
}
}
String[] values6=request.getParameterValues("demo4");
if(values6!=null){
for(int i=0;i<values.length;i++){
System.out.println(UtilClass.codeChanger(values6[i]));
}
}
%>
<table align="center">
<tr align="center">
<td>
<ul id="demo5">
</ul><a href="#">添加</a></td>
</tr>
<tr>
<td align="center"><input type="submit" name="Submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
如上所示，这段JS代码我是从网上搜索过来借鉴的，因为我要动态生成一行文本框表单，一行里面有14个表单，那么我如何更改每个文本框的长度好让他们与我的表头对其。
另外，这段代码的最后有个“移除”链接，如何将这个链接移动到与“提交”按钮同一行。
...全文
请发表友善的回复…
发表回复
wcj1981 2011-01-16
- 打赏
- 举报
解决了，我知道代码这么长可能大家都不愿意看，但是作为我自己来说，我对JS不懂，我只有代码进行无数次的试验才知道如何修改。即使这么修改成功了，我还是仍然不知道为什么这么修改，以及其意义。
wcj1981 2011-01-15
- 打赏
- 举报
多谢楼上的几位，我对JS不懂的，JQ我查了下，不会用呢，这段是写好的代码，我想改改就能达到我想用的效果，就是不知道怎么改成我说的那样啊。
碧海情天-赵亮 2011-01-15
- 打赏
- 举报
[Quote=引用楼主 wcj1981 的回复:]
如上所示，这段JS代码我是从网上搜索过来借鉴的，因为我要动态生成一行文本框表单，一行里面有14个表单，那么我如何更改每个文本框的长度好让他们与我的表头对其。
另外，这段代码的最后有个“移除”链接，如何将这个链接移动到与“提交”按钮同一行。[/Quote]
太麻烦，你直接把你这个活发到项目交易频道就是了。
如上所示，这段JS代码我是从网上搜索过来借鉴的，因为我要动态生成一行文本框表单，一行里面有14个表单，那么我如何更改每个文本框的长度好让他们与我的表头对其。
另外，这段代码的最后有个“移除”链接，如何将这个链接移动到与“提交”按钮同一行。[/Quote]
太麻烦，你直接把你这个活发到项目交易频道就是了。
hch126163 2011-01-15
- 打赏
- 举报
设置 style 不就可以了
创建控件，可以用 标准 dom
也可以用 innerHTML
创建控件，可以用 标准 dom
也可以用 innerHTML
wwtbless 2011-01-15
- 打赏
- 举报
你这个是不是写的有点复杂了点哟。用jq的话应该很好解决了呀
