Alpha
多少春秋风雨改 多少崎岖不变爱
BlogJava
首页
新随笔
联系
聚合
管理
随笔-179 评论-666 文章-29 trackbacks-0
动态生成HTML表单
前段时间在做设票系统,瞎搞一会,用JavaScript搞了一些有趣的东西,因为投票的条数不定,一个题目有不定条选项,要实现一次把投票题目与不定数目选项的投票项目一次性添加进数据库,因些就想了用JavaScript写了一个动态生成的HTML的“文体框”。然后用数组把所有值写入数据库。现在就把它做成一个简单的演示例子放在这里吧:
<
html
>
<
head
>
<
title
>
动态生成文体框演示
< SPAN>
title
>
<
script
language
="javascript"
>
function
createitem()
{
var
m
=
document.form1;
var
val
=
m.max.value;
for
(i
=
0
;i
<
val;i
++
)
{
r
=
tab.insertRow()
c
=
r.insertCell('nowrap align:Left')
c.innerHTML
=
"
复选
单选
"
;
c
=
r.insertCell()
c.innerHTML
=
"
·
"
;
}
m.max.value
=
""
;
}
function
resetDate()
{
var
m
=
document.form1;
m.action
=
"
butt.html
"
;
m.submit();
}
< SPAN>
script
>
< SPAN>
head
>
<
body
>
<
form
name
="form1"
method
=post
action
=""
>
<
table
name
="tab"
id
="tab"
>
<
tr
>
<
td
colspan
="2"
>
<
div
align
="center"
>
·动态生成文体框演示·
< SPAN>
div
>< SPAN>
td
>
< SPAN>
tr
>
<
tr
>
<
td
colspan
="2"
>
请输入您要添加的行数:
<
input
type
="text"
name
="max"
size
="5"
value
=""
>
<
input
type
="button"
name
="add"
value
="添加"
onclick
="createitem()"
>
<
input
type
="button"
name
="reset"
value
="重置"
onclick
="resetDate()"
>
< SPAN>
td
>
< SPAN>
tr
>
< SPAN>
table
>
< SPAN>
form
>
< SPAN>
body
>
< SPAN>
html
>
后来又做了一些其它的尝试演示,下面这个程序是增加了删除HTML表单的例子:
<
script
language
="javascript"
>
var
curRow
=
null
;
function
selectRow(tr1)
{
if
(curRow)
curRow.bgColor
=
"
#FFFFFF
"
;
tr1.bgColor
=
"
e7e7e7
"
;
curRow
=
tr1;
}
function
addRow(src)
{
var
newrow
=
src.insertRow(src.rows.length
-
1
);
newrow.attachEvent(
"
onclick
"
,
function
()
{selectRow(newrow);}
);
newrow.height
=
20
;
var
i
=
5
;
while
(i
--
)
{
var
newcell
=
newrow.insertCell();
switch
(i)
{
case
0
: newcell.innerHTML
=
'
<
input type
=
"
button
"
onClick
=
"
javascript:delRow(this.parentElement.parentElement)
"
value
=
"
删除此行
"
>
';
break
;
default
: newcell.innerHTML
=
'
&
nbsp;';
break
;
}
}
}
function
delRow(src)
{
src.parentElement.deleteRow(src.rowIndex);
}
< SPAN>
script
>
<
table
id
="tabe"
width
="100%"
border
="1"
>
<
tr
>
<
th
width
="20%"
>
编号
< SPAN>
th
>
<
th
width
="20%"
>
姓名
< SPAN>
th
>
<
th
width
="20%"
>
性别
< SPAN>
th
>
<
th
width
="20%"
>
年龄
< SPAN>
th
>
<
th
width
="20%"
>
民族
< SPAN>
th
>
< SPAN>
tr
>
<
tr
id
="lastRow"
onClick
="addRow(this.parentElement)"
>
<
td
>
1
< SPAN>
td
>
<
td
>
2
< SPAN>
td
>
<
td
>
3
< SPAN>
td
>
<
td
>
4
< SPAN>
td
>
<
td
>
5
< SPAN>
td
>
< SPAN>
tr
>
< SPAN>
table
>
posted on 2005-10-27 17:49
Alpha
阅读(8801)
评论(7)
编辑
收藏
所属分类:
Java J2EE JSP
评论:
#
re: 动态生成HTML表单 2005-11-06 18:02 |
alam
不错很实用
回复
更多评论
#
re: 动态生成HTML表单 2006-04-10 10:18 |
gdizqzq
非常感谢
delRow(this.parentElement.parentElement)
function delRow(src){
src.parentElement.deleteRow(src.rowIndex);
}
受益匪浅
回复
更多评论
#
re: 动态生成HTML表单 2007-04-13 14:50 |
赌东道
为什么总是说我的max为空对象啊
回复
更多评论
#
re: 动态生成HTML表单 2007-04-25 21:03 |
gfds
gfd
回复
更多评论
#
re: 动态生成HTML表单 2008-10-15 11:12 |
gsb
顶
回复
更多评论
#
re: 动态生成HTML表单 2010-03-16 13:17 |
busifox
挺不错的
回复
更多评论
#
re: 动态生成HTML表单
2014-05-04 16:47 |
55
87444
回复
更多评论
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
Ubuntu 14.04 安装 php nginx mysql JDK 8 svn
jsp页面中,JSTL El表达式字符串比较常用方法
lighttpd配置之代理、负载均衡(mod_proxy)
linux+nginx+tomcat负载均衡,实现session同步
CLASSPATH
如何选择开源许可证?
utf-8项目生成javadoc 编码GBK 的不可映射字符
BeanUtils & PropertyUtils & MethodUtils类使用方法
Apache tomcat 日志分析
如何删除JSP编译后的空行
今日记一事,明日悟一理,积久而成学。
<
2005年10月
>
日
一
二
三
四
五
六
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(32)
给我留言
查看公开留言
查看私人留言
随笔分类
(182)
Android 移动开发
Hibernate(2)
Java J2EE JSP(31)
jQuery JavaScript Flex(5)
Linux Nginx(28)
MySQL NoSQL(14)
PHP ThinkPHP(2)
SEO优化 网站推广(1)
Spring(3)
吴语轮笔(81)
吾亦好摄(8)
开源开发工具使用(2)
网站设计 用户体验(5)
文章分类
(39)
J2EE+JSP(1)
JavaScript(9)
Linux、操作系统(9)
人生哲理(4)
多愁善感(11)
愤青集中营(2)
数据库SQL(3)
相册
06圣诞节
07.1.7水濂山
07年元旦
原创图片
杂七杂八
校庆
梅花
友情链接
VIP卡云
坏男孩
田逸blog
黎波
我的地盘
技术文档
CSS 样式表参考文档
DHTML 参考手册
DWR中文文档
MySQL 5.1参考手册
Spring Framework 开发参考手册
灰狐文档中心
搜索
积分与排名
积分 - 1326847
排名 - 20
最新随笔
1. Centos7安装Nginx+PHP+MySQL
2. Ubuntu完美安装搭建Git服务器
3. Git本地服务器搭建及使用详解
4. Linux 常见运维命令
5. Linux怎样恢复误删除的数据
6. CentOS 7 安裝 Nginx、PHP7、PHP-FPM
7. Tomcat8 安全配置与性能优化
8. Ubuntu14.04下部署FastDFS 5.08+Nginx 1.9.14
9. Ubuntu14.04下搭建VPN服务
10. CentOS 6.4 配置VPN服务教程
最新评论
1. re: Ubuntu14.04下部署FastDFS 5.08+Nginx 1.9.14
相当成功
--reatang
2. re: mysql alter 语句用法,添加、修改、删除字段等
密密麻麻吗
--,,,
3. eettafellamp
评论内容较长,点击标题查看
--eettafellamp
4. re: 使用Spring MVC表单标签
水电费
-- 低调
5. aanrechtblad
评论内容较长,点击标题查看
--aanrechtblad
6. re: Tomcat8 安全配置与性能优化[未登录]
评论内容较长,点击标题查看
--aa
7. re: Tomcat8 安全配置与性能优化[未登录]
评论内容较长,点击标题查看
--aa
8. aa[未登录]
啊啊啊啊
--aa
9. re: Ubuntu14.04下部署FastDFS 5.08+Nginx 1.9.14
可以可以可以
--司马青衫
10. re: mysql alter 语句用法,添加、修改、删除字段等[未登录]
1111
--a
阅读排行榜
1. MySQL的mysqldump工具的基本用法(237522)
2. mysql alter 语句用法,添加、修改、删除字段等(166832)
3. HttpClient 学习整理(143486)
4. c3p0详细配置(91777)
5. Mysql日期和时间函数大全(61365)
6. Hibernate 不同数据库的连接及SQL方言(50256)
7. iptables 开启80端口 (32118)
8. AS与JS相互通信(Flex中调用js函数)(26646)
9. 使用Spring MVC表单标签(23946)
10. JFreeChart在JSP中的应用实例(22522)
11. scrollbar属性、样式详解(20539)
12. linux+nginx+tomcat负载均衡,实现session同步(20411)
13. 多级反向代理[Squid]下获取客户端真实IP地址(16365)
14. linux rsync同步设置详细指南(15664)
15. jsp页面中,JSTL El表达式字符串比较常用方法(15554)
评论排行榜
1. 南雄中学百年校庆(91)
2. HttpClient 学习整理(44)
3. JFreeChart在JSP中的应用实例(29)
4. c3p0详细配置(26)
5. 从MySQL得到最大的性能(20)
6. 学会如何去爱一个人(16)
7. 千年珠玑(15)
8. 笑翻天乐园-痛并快乐着(14)
9. 说说我们技术部(13)
10. MySQL的mysqldump工具的基本用法(12)
11. 述 职 报 告(11)
12. 多级反向代理[Squid]下获取客户端真实IP地址(11)
13. 双喜临门(10)
14. 元旦遭遇人山人海(9)
15. 一个身材超好的MM(7)