分享

动态生成HTML表单

 nbtymm 2007-01-15
         前段时间在做设票系统,瞎搞一会,用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>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多