|
前段時(shí)間在做設(shè)票系統(tǒng),瞎搞一會(huì),用JavaScript搞了一些有趣的東西,因?yàn)橥镀钡臈l數(shù)不定,一個(gè)題目有不定條選項(xiàng),要實(shí)現(xiàn)一次把投票題目與不定數(shù)目選項(xiàng)的投票項(xiàng)目一次性添加進(jìn)數(shù)據(jù)庫,因些就想了用JavaScript寫了一個(gè)動(dòng)態(tài)生成的HTML的“文體框”。然后用數(shù)組把所有值寫入數(shù)據(jù)庫?,F(xiàn)在就把它做成一個(gè)簡(jiǎn)單的演示例子放在這里吧:
<html> <head> <title> 動(dòng)態(tài)生成文體框演示 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">·動(dòng)態(tài)生成文體框演示·div>td> tr> <tr> <td colspan="2"> 請(qǐng)輸入您要添加的行數(shù): <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>![]() 后來又做了一些其它的嘗試演示,下面這個(gè)程序是增加了刪除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=‘ ‘;break; } } }![]() function delRow(src){ src.parentElement.deleteRow(src.rowIndex); } script>![]() <table id="tabe" width="100%" border="1" > <tr> <th width="20%">編號(hào)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> |
|
|