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>

  • 相关阅读:
    [BZOJ2324][ZJOI2011]营救皮卡丘
    P4324 [JSOI2016]扭动的回文串
    P5068 [Ynoi2015]我回来了
    P4412 [SHOI2004]最小生成树
    bzoj3118: Orz the MST(线性规划+单纯形法)
    bzoj3265: 志愿者招募加强版(线性规划+单纯形法)
    bzoj3550: [ONTAK2010]Vacation(单纯形法+线性规划)
    uoj#179. 线性规划
    P2093 [国家集训队]JZPFAR(KDTree)
    P3538 [POI2012]OKR-A Horrible Poem
  • 原文地址:https://www.cnblogs.com/shaolang/p/3571607.html
Copyright © 2011-2022 走看看