JS点击添加input输入框

Tony · 2009-12-01, 06:10 PM

有的时候我们需要提交多个input框，这个就需要我们利用js来实现。

HTML 代码:

<script type="text/javascript" >
/****添加新条目***/
/******点击添加input输入框JS******/
function checkRowsLimit()
{
 var rowLimit = 10;
 var len=document.getElementById('filearea').rows.length;
 if(len==rowLimit)
 {
  alert('抱歉，为了您主页美观，只能添加这么多条目了。');
  return false;
 }
 else
 {
  return true;
 }
}
 
function addNewRow()
{
 var obj=document.getElementById('filearea');
 
 var row=obj.insertRow(-1);
 var c0=row.insertCell(0);
 c0.innerHTML='<input type=text size="3" maxlength=8 name="question" value="" onpropertychange=changeFlagValue()/> ：';
 c0.align='right';
 
 var c1=row.insertCell(1);
 c1.innerHTML='<input type=text size=50 maxlength=50 name="answer" style="margin-left:1px;" value="" onpropertychange=changeFlagValue()/>';
 c1.align='left';
 
 var c2=row.insertCell(2);
 c2.innerHTML='<a href="javascript:void(0)" onclick="removeRow(this)">[删除]</a>';
 changeFlag = true;
 try
 {
  comm_set_page_height(); 
 }
 catch (e)
 {
 }
}
function removeRow(fontobj)
{
 if(confirm("确定取消该项吗?"))
 {
  var obj=document.getElementById('filearea');
  var n=fontobj.parentNode.parentNode.rowIndex;
  obj.deleteRow(n);
 }
}
</script>
 
<body>
 <table width="735" border="0"  id="filearea">
     <tr>
         <td align=right><input type="text" onpropertychange=changeFlagValue() maxLength=8 size=3 name=question /> ：</td>
         <td align=left><input type="text"  style="MARGIN-LEFT: 1px"
onpropertychange=changeFlagValue() maxLength=50 size=50 name=answer /></td>
  <td><a href="#" onClick="if(checkRowsLimit()) {addNewRow();changeFlag=true}" title="点击后在上面添加的输入框">[添加条目]</a></td>
     </tr>
 </table></body>

2009-12-01, 06:10 PM	#1
No1 Tony 坛主注册日期: 2003-10-22 帖子: 11,053 积分:6 精华:24 现金:14348金币资产:29325305金币	JS点击添加input输入框有的时候我们需要提交多个input框，这个就需要我们利用js来实现。 HTML 代码: <script type="text/javascript" > /**添加新条目/ /***点击添加input输入框JS****/ function checkRowsLimit() { var rowLimit = 10; var len=document.getElementById('filearea').rows.length; if(len==rowLimit) { alert('抱歉，为了您主页美观，只能添加这么多条目了。'); return false; } else { return true; } } function addNewRow() { var obj=document.getElementById('filearea'); var row=obj.insertRow(-1); var c0=row.insertCell(0); c0.innerHTML='<input type=text size="3" maxlength=8 name="question" value="" onpropertychange=changeFlagValue()/> ：'; c0.align='right'; var c1=row.insertCell(1); c1.innerHTML='<input type=text size=50 maxlength=50 name="answer" style="margin-left:1px;" value="" onpropertychange=changeFlagValue()/>'; c1.align='left'; var c2=row.insertCell(2); c2.innerHTML='<a href="javascript:void(0)" onclick="removeRow(this)">[删除]</a>'; changeFlag = true; try { comm_set_page_height(); } catch (e) { } } function removeRow(fontobj) { if(confirm("确定取消该项吗?")) { var obj=document.getElementById('filearea'); var n=fontobj.parentNode.parentNode.rowIndex; obj.deleteRow(n); } } </script> <body> <table width="735" border="0" id="filearea"> <tr> <td align=right><input type="text" onpropertychange=changeFlagValue() maxLength=8 size=3 name=question /> ：</td> <td align=left><input type="text" style="MARGIN-LEFT: 1px" onpropertychange=changeFlagValue() maxLength=50 size=50 name=answer /></td> <td><a href="#" onClick="if(checkRowsLimit()) {addNewRow();changeFlag=true}" title="点击后在上面添加的输入框">[添加条目]</a></td> </tr> </table></body>