毛子

http://www.29db.com 天天人物网
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

实现一个不错的效果,全部js实现

Posted on 2008-03-21 13:39  毛子  阅读(195)  评论(0编辑  收藏  举报
我想 数量 列输入框输入完后,回车 自动增加一个新行,继续输入,输入完数量后回车,再增加一行,再继续输入,直到输入完毕后,点提交,会出来一个输入信息确认的页面,之后再 点 提交,就把数据一起提交到数据库里,实现如下:

<html>
  
<head></head>
  
<body>
    
<form>
      
<table width='200px' align="center">
       
<thead>
        
<tr><td width='50%'>货号</td><td width='50%'>数量</td></tr>
       
</thead>
       
<tbody id='tbody'>
        
<tr><td><input type="text" /></td><td><input type="text" onkeydown="IsEnter(event)"/></td></tr>
       
</tbody>
       
<tfoot>
         
<tr><td colspan='2' align="center"><input type="button" onclick="return check(this.form)" value="提交" /></td></tr>
       
</tfoot>
      
</table>
      
<script type="text/javascript">
      
function IsEnter(e)
      
{
        e
=e||event;
        
if(e.keyCode==13)
        
{
           NewRow();
           
//阻止提交的执行
           if(e.preventDefault)//ff
             e.prevetnDefault();
           
else//ie
           {
             e.keyCode
=0;
             e.returnValue
=false;
           }

        }

      }

      
function NewRow()
      
{
        
var td=document.getElementById('tbody');
        td.appendChild(td.rows[
0].cloneNode(true));
        
var inputs=td.rows[td.rows.length-1].getElementsByTagName("input");
        
for(var i=0;i<inputs.length;i++)
        
{
           inputs[i].value
='';
        }

        inputs[
0].focus();
      }

      
function check(f)
      
{
         
if(confirm('确认提交?'))
           f.sumit();
      }

      
</script>
    
</form>
  
</body>
</html>