• 使用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>

  • 相关阅读:
    Controlling behavior of existing services in system
    获取站点路径方法
    如何处理DataTable.Select();执行后重新排序的问题!
    ASP.NET 2.0 编程珠玑之五调试已创建好的代码
    Meal Scheduler in C#
    DHTML+Ajax? MXML+ActionScript? XAML+C#? 是巧合,还是必然?
    C#验证输入的是否数字
    Monitoring System Usage using Windows Service
    ADO.NET 2.0中的DataSet和DataTable
    使用asp.net 2.0和SQL SERVER 2005构建多层应用
  • 原文地址:https://www.cnblogs.com/shaolang/p/3571607.html
Copyright © 2020-2023  润新知