zoukankan      html  css  js  c++  java
  • 使用js实现input输入框的增加

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS点击添加input输入框</title>

    <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>
    </head>
    <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>
    </html>

  • 相关阅读:
    超级文件夹管理器
    基于IAP和网口升级固件
    经典排序之高速排序
    hdu 4908 BestCoder Sequence
    Boost.Asio c++ 网络编程翻译(11)
    Silverlight 5 Grid组的MouseLeave响应
    Linux下实现RAID
    关于相互排斥运行的设计与实现
    Codeforces 309C Memory for Arrays 二进制模拟进位
    sharepoint 2013 资源管理器copy大文件到本地失败解决方法
  • 原文地址:https://www.cnblogs.com/shaolang/p/3571607.html
Copyright © 2011-2022 走看看