随笔-179  评论-666  文章-29  trackbacks-0
         前段时间在做设票系统,瞎搞一会,用JavaScript搞了一些有趣的东西,因为投票的条数不定,一个题目有不定条选项,要实现一次把投票题目与不定数目选项的投票项目一次性添加进数据库,因些就想了用JavaScript写了一个动态生成的HTML的“文体框”。然后用数组把所有值写入数据库。现在就把它做成一个简单的演示例子放在这里吧:

<html>
<head>
<title> 动态生成文体框演示 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();
    }


script>
head>

<body>
<form name="form1" method=post action="">
<table name="tab" id="tab">
   
<tr>
     
<td colspan="2"> <div align="center">·动态生成文体框演示·div>td>
   
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()">
     
td>
   
tr>
table>
form>
body>

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);
    }

script>

<table id="tabe" width="100%"  border="1" >
  
<tr>
    
<th width="20%">编号th>
    
<th width="20%">姓名th>
    
<th width="20%">性别th>
    
<th width="20%">年龄th>
    
<th width="20%">民族th>
  
tr>

  
<tr id="lastRow" onClick="addRow(this.parentElement)">
    
<td> 1td>
    
<td> 2td>
    
<td> 3td>
    
<td> 4td>
    
<td> 5td>
  
tr>

table>



posted on 2005-10-27 17:49 Alpha 阅读(8802) 评论(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  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: