请问怎样用javascript动态生成一些field,如text啊,radio啊,checkbox的东东

xgy_p 2002-07-29 09:58:31
比如用户一按一个button，就可以动态在页面上产生一些text啊，radio啊，checkbox啊之类的东东，让用户去填。
...全文
107 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
Andrawu 2002-07-30
  • 打赏
  • 举报
 回复
2.这个是别人的

<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataSel {
BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataOver {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.controlPanel {
BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.scheduleButtonVisible {
BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
}
</STYLE>
<SCRIPT language=javascript>
var modified=0
var currentLine=-1
var line=-1
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==ln)
line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==cln)
oldLine=i
if (line==oldLine)
return
//if td <0 then only clear all title
if (line>0)
{
document.all.tdt[line].className="tableDataHit";
document.ecform("medication")[line].className="tableDataHit";
if (oldLine>0)
{
document.all.tdt[oldLine].className="tableData";
document.ecform("medication")[oldLine].className="tableData";
}
currentLine=ln
}
}

function move(direc){
//向下移动direc行，并将移动到的行高亮度显示

if(line+direc<1 || (line+direc)>document.all.tdt.length-1) return;
var temp=document.ecform.medication[line].value;
document.ecform.medication[line].value=document.ecform.medication[line+direc].value;
document.ecform.medication[line+direc].value=temp

line+=direc;
lightOn(line);
}
function delIt()
{
line=parseInt(event.srcElement.ln,10)

if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
{
if ( document.ecform.medication[i].value.length>0 )
if (!confirm("Are you sure you want to delete this record?"))
return
PLList.deleteRow(i)
}
}
function modifiedIt(field)
{
// field.value=checkText(field.value);
modified=1
line=parseInt(event.srcElement.ln,10)

if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
document.ecform.edit[i].value=1
}
function newHospitalVisit()
{
newRow=PLList.insertRow(PLList.rows.length);
newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="#e0e0e0";
newRow.className="tableData";
newRow.onclick=lightOn;

c1=newRow.insertCell(0);
c1.id="delItem";
c1.ln=allCount;
c1.className="scheduleButtonVisible";
c1.onclick=delIt;
c1.onmouseover=mouseOver;
c1.onmouseout=mouseOut;
c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
</SCRIPT>
</HEAD>
<BODY bgColor=white>
<FORM method=post name=ecform>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<DIV id=div1
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
<TBODY>
<TR bgColor=#0a6846 id=tdt>
<TH width=80><FONT color=white>删除
<INPUT name=PLID type=hidden>
<INPUT
name=edit type=hidden>
</FONT></TH>
<TH width="559">
<INPUT name=medication type=hidden>
<FONT
color=white>变化表格 </font>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="1" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=54 ln="1">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="1" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="like it?" ln="1">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="2" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=55 ln="2">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="2" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="how about it?" ln="2">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="3" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=56 ln="3">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="3" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 ln="3">
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
allCount=4
</SCRIPT>


<TABLE align=center border=1 borderColorDark=white borderColorLight=gray
cellPadding=1 cellSpacing=1 class=controlPanel cols=4 rules=all width="100%"
nowrap>
<TBODY>
<TR>
<TD align=middle class=controlPanel onclick=newHospitalVisit()
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">添加一行</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(-1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向上移动</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向下移动</font></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
</BODY>
</HTML>
Andrawu 2002-07-30
  • 打赏
  • 举报
 回复
1.

<input type="text" name="t1">
<input type="button" name="b1" value="test" onclick="test(t1.value);">
<table id="tablelist">
<tr>
<td width="115" valign="top" align="left" class="main"> 属性名： <br>
<input type="text" size="12" name="Other_Production_Property_Name[]" class="text">
</td>
<td width="637" valign="top" class="main"> 属性内容：<br>
<textarea class="main" name="Other_Production_Property_Content[]" rows="3" cols="40"></textarea>
</td>
</tr>

</table>
</BODY>
<script>
function test(iRows) {
var tableIdName="tablelist";
var trClassName="" ;
var arrHtml = new Array();
arrHtml[0]="<input size=\"12\" type=\"text\" class=\"text\" name=\"Other_Production_Property_Name[]\">" ;
arrHtml[1]="<textarea class=\"main\" name=\"Other_Production_Property_Content[]\" rows=\"3\" cols=\"40\"></textarea>" ;

addDetails(tableIdName,trClassName,arrHtml,iRows);

}
//在table中增加tr行
//tableIdName:table表的ID号名称，类型为字符串
//trClassName:tr行的样式类名称，类型为字符串
//arrHtml:tr行的td中的内容，类型为字符串数组
function addDetails(tableIdName,trClassName,arrHtml,iRows)
{
var tb=document.all(tableIdName);
if(tb && tb.tagName=="TABLE")
{
iNRows = tb.rows.length ;
iAddRows = parseInt(iRows) - iNRows ;
if (iAddRows>0){
for (i = 1;i<=iAddRows;i++){
var rowId=tb.rows.length;
var row=tb.insertRow(rowId);
var cols=arrHtml.length;
if(row)
{
row.className=trClassName ;
for(var j=0;j<cols;j++)
{
var cell=row.insertCell(j);
if(cell)
{
cell.innerHTML=arrHtml[j];
}
}
}
}
}else{
delRows(tableIdName,iRows) ;
}
}
}

function delRows(tableIdName,iRowIndex){
var tb=document.all(tableIdName);
if(tb && tb.tagName=="TABLE")
{
var iRows=tb.rows.length ;
for (var i=iRows-1;i>=parseInt(iRowIndex);i--){
tb.deleteRow(i) ;
}

}
}

</script>
希默软件 2002-07-30
  • 打赏
  • 举报
 回复
<SCRIPT>
function fnCreate(){
oData.innerHTML="";
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text!=""){
var aElement=document.createElement(oOption.text);
eval("aElement." + oOption.value + "='" + oText.value + "'");
if(oOption.text=="A"){
aElement.href="javascript:alert('A link.')";
}
oData.appendChild(aElement);
}
}
</SCRIPT>
<P>Create a/an <SELECT ID=oSel onchange="fnCreate()">
<OPTION>
<OPTION VALUE="innerText">A
<OPTION VALUE="value"><INPUT TYPE="text">
<OPTION VALUE="value"><INPUT TYPE="button">
<OPTION VALUE="innerText">MARQUEE
</SELECT> element with the text <INPUT TYPE="text" ID="oText" SIZE=20 VALUE="Blueberries Rock!" onkeyup="fnCreate();">.
</P>
<P>
New Element: <SPAN ID="oData" STYLE="width: 300; background-color: #CFCFCF;"></SPAN>
</P>
孟子E章 2002-07-29
  • 打赏
  • 举报
 回复
<script>
function test(){
var str="<br><input><input type='checkbox'><input type='radio' name=a><input type='radio' name=a><input type='radio' name=a>"
document.all.mxh.insertAdjacentHTML("afterBegin",str)
}
</script>
<div id=mxh></div>
<input type=button value=insert onclick="test()">
javascript表单域与json数据间的交互第2 3页.docx
javascript表单域与json数据间的交互第2 3页.docx
layui默认选中table的CheckBox复选框方法
今天小编就为大家分享一篇layui默认选中table的CheckBox复选框方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
EXT 完美教程
EXT 教程，各种实例，详解。基本知识点
表单的基本使用1
表单的基本使用使用表单布局和表单控件，实现一个注册表单页面效果图如下:答案:
40个CSS/JS风格和功能技术处理
下面是最常用的40个CSS/JS风格和功能技术处理表单元素，真是收集的很全。
JavaScript

87,996

社区成员

224,693

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章