zoukankan      html  css  js  c++  java
  • Jquery实现动态添加按钮

    在测量中 面是有不同的点组成,在输入的时候 需要动态的添加 不同点的坐标值:

    点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框

    记得要引入jquery.js

    JS代码
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
    $(
    "#btnMian").click(function() {
    //生成 0 到100000 随机数 Mapth.random产生 0到1的随机数 然后乘以100000
    var maxNumber = 100000;
    var randomNumber
    = Math.round(maxNumber * Math.random());
    // alert(randomNumber);
    var s = "";
    s
    += "<table name='" + randomNumber + "' width=\"450\"><tr>";
    s
    += "<td width=\"72\"></td>";
    s
    += "<td width=\"155\" align=\"left\">";
    s
    += "<input type='text' name='m1' /></td>";
    s
    += "<td align=\"left\" width=\"155\"><input type='text' name='m1' /></td>";
    s
    += "<td><a onclick=\"del(" + randomNumber + ")\" style='cursor:pointer'>取消</a><span style=\"color:red\"></span></td></tr></table>";
    var $mm
    = $(s);
    var $parent
    = $("#mian");
    $parent.append($mm);
    })
    })

    function del(aa) {
    $(
    "#mian>table[name=" + aa + "]").remove();
    }
    function checkForm() {
    var txtItemName
    = $("#txtItemName").val();
    if (txtItemName.replace(/[\s]/g, '').length < 1) {
    $(
    "#lblMess").html("请输入项目名称");
    $(
    "#lblMess").addClass("onBlurClassError");
    return false;
    }
    var txtItemId
    = $("#txtItemId").val();
    if (txtItemId.replace(/[\s]/g, '').length < 1) {
    $(
    "#lblMess").html("请输入项目编号");
    $(
    "#lblMess").addClass("onBlurClassError");
    return false;
    }
    var txtUser
    = $("#txtUser").val();
    if(txtUser.replace(/[\s]/g,'').length<1)
    {
    $(
    "#lblMess").html("请输入巡查人员");
    $(
    "#lblMess").addClass("onBlurClassError");
    return false;
    }
    //循环遍历 文本框的值
    var zheng = new RegExp("(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
    var flag
    = true;
    $(
    "[name='m1']:text").each(function() {
    if ($(this).val().replace(/[\s]/g, '').length < 1) {
    $(
    "#lblMess").html("请输入 面 的坐标值!");
    $(
    "#lblMess").addClass("onBlurClassError");
    // return false;
    flag = false;
    }
    else {
    if (!zheng.test($(this).val())) {
    $(
    "#lblMess").html("请输入正确的 面 的坐标值!");
    $(
    "#lblMess").addClass("onBlurClassError");
    //return false
    flag = false;
    }
    }

    })
    if (flag == false) {
    return false;
    }
    var mian
    = $("#txtMianInfo").val();
    if (mian.replace(/[\s]/g).length < 1) {
    $(
    "#lblMess").html("请输入面的描述");
    $(
    "#lblMess").addClass("onBlurClassError");
    return false;
    }

    return true;
    }
    </script>
    页面代码
    <div id="content">
    <table style=" 450px;">
    <tr>
    <td class="style1">
    项目名称

    </td>
    <td class="style2">
    <asp:TextBox ID="txtItemName" runat="server"></asp:TextBox>
    </td>
    <td class="style3">

    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td class="style1">
    <asp:Label ID="Label3" runat="server" Text="项目编号:"></asp:Label>
    </td>
    <td class="style2">
    <asp:TextBox ID="txtItemId" runat="server"></asp:TextBox>
    </td>
    <td class="style3">

    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td class="style1">
    <asp:Label ID="Label2" runat="server" Text="巡查人员:"></asp:Label>
    </td>
    <td class="style2">
    <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
    </td>
    <td class="style3">

    </td>
    <td>

    &nbsp;</td>
    </tr>
    </table>
    <table width="450">

    <tr>
    <td width="83px">
    <asp:Label ID="Label6" runat="server" Text="面:"></asp:Label>
    </td>
    <td class="style2">
    <input id="Text5" name="m1" type="text" />
    </td>
    <td class="style3">
    <input id="Text6" name="m1" type="text" />
    </td>
    <td>

    <input id="btnMian" type="button" value="添加" /></td>
    </tr>

    </table>
    <div id="mian" style="450px"></div>

    <table width="450">
    <tr>
    <td class="style1">
    面描述:
    </td>
    <td colspan="2" style="text-align: left">
    <asp:TextBox ID="txtMianInfo" runat="server" Width="247px"></asp:TextBox>
    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td class="style1">

    </td>
    <td class="style2" style="text-align:center;">
    &nbsp;</td>
    <td class="style3">

    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td class="style1">

    </td>
    <td class="style2" style="text-align:left;" colspan="3">
    <asp:Label ID="lblMess" runat="server" ForeColor="Red"></asp:Label>
    </td>
    </tr>
    <tr>
    <td class="style1" colspan="4">

    &nbsp;</td>
    </tr>
    </table>

    </div>
  • 相关阅读:
    Vue(三十三)国际化解决方案
    Vue(三十二)SSR服务端渲染Nuxt.js
    字符串与数组常用的属性和方法
    Vue(三十一)轮播组件
    Vue(三十)公共组件
    Vue(二十九)页面加载过慢问题
    Vue(二十八)el-cascader 动态加载
    Vue(二十七)当前GitHub上排名前十的热门Vue项目(转载)
    React(九)create-react-app创建项目 + 按需加载Ant Design
    React(八)样式及CSS模块化
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/1728938.html
Copyright © 2011-2022 走看看