毛子

http://www.29db.com 天天人物网
posts - 7, comments - 1, trackbacks - 15, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

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

Posted on 2008-03-21 13:39 毛子 阅读(42) 评论(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>

最新IT新闻:
· 谷歌将出售Clearwire股份 不到收购价1/10
· 为什么Google比苹果更令微软恐惧？
· 思科拟2.71亿美元收购私有公司Lightwire
· 社交商务公司Bazaarvoice将于2月24日进行IPO
· 戴尔收购备份软件公司AppAssure
» 更多新闻...