zoukankan      html  css  js  c++  java
  • 在jsp页面动态添加,删除文本框模块

     jsp代码============

    <table class="crud-content-info" >
    <tr >
    <td align="center" style="padding-left: 24%;">
    <td><input type="button" onclick="addname()" value="添加"></input><input type="button" onclick="mnsname()" value="删除"></input></td>

    </tr>
    <tr style="height: 50px" id="namearea">
    <td colspan="4">
    <table style=" 100%;">
    <tr>
    <td align="right" valign="middle">产品名称类别:</td>
    <td>
    <select name="productNameCategory" id="productNameCategory1" data-options="editable:false">
    </select>
    </td>
    <td align="right" class="zb-ml-2">产品名称:</td>
    <td>
    <input type="text" name="productName" id="productName" style="margin-left: 10px" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    js代码============

    //添加
    function addname() {
    $("#namearea").parent().append(
    `<tr style="height: 50px" id="namearea" >
    <td colspan="4">
    <table style="100%;">
    <tr>
    <td align="right" valign="middle">产品名称类别: </td>
    <td><select class="zb-ml-1" id="productNameCategory`+$("#namearea").parent().children().length +`" type="text" name="productNameCategory" ></select> </td>
    <td align="right" class="zb-ml-2">产品名称:</td>
    <td><input style="margin-left: 10px" id="productName`+$("#namearea").parent().children().length +`" type="text" name="productName" /></td>
    </tr>
    </table>
    </td>
    </tr>`);

    var url='<%=basePath%>xyData/xySelecteHealthDit/xySelecteHealthDit.do?tip_id='
    var c=$("#namearea").parent().children().length-1;
    HydUtilLoadSellect(url,$('#productNameCategory'+c),215);
    $('#ProductName'+c).validatebox({
    required: true
    });
    if($("#namearea").parent().children().length > 5){
    $.messager.alert('提示','最多添加5项!','info');
    }
    };
    //删除
    function mnsname() {
    if($("#namearea").parent().children().length > 2){
    $("#namearea").parent().children().last().remove();
    }else{
    //alert("至少保留一项");
    $.messager.alert('提示','至少保留一项!','info');
    }
    //$("#namearea>*:last").remove();
    };

  • 相关阅读:
    网站推荐:11个相似图片搜索网站(以图找图)
    逻辑回归
    关于估计、偏差以及方差
    算法面试问题集锦
    sql语句执行顺序
    五大算法之动态规划
    五大算法之回溯算法
    操作系统问题总结之处理机调度
    操作系统问题总结之进程管理
    Element-UI 去掉表格边框(表格Hover事件移除)
  • 原文地址:https://www.cnblogs.com/xianz666/p/12180859.html
Copyright © 2011-2022 走看看