JSP中用js控制添加行，删除行

最新推荐文章于 2024-06-26 17:58:07 发布

sxwhbj

最新推荐文章于 2024-06-26 17:58:07 发布

阅读量1.4k

点赞数

分类专栏： java WEB前端文章标签： jsp javascript

本文链接：https://blog.csdn.net/sxwhbj/article/details/46982957

版权

java WEB前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

其中涉及到样式，样式可以自己添加。增加行点击“添加”，删除行点击每一行后边的“删除”。

<%@page contentType="text/html;charset=utf-8"%>

<%@include file="../taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    function saveInStorage()
    {
       var can_submit = true;
       var storageId = $("#storageId").val();
       if(storageId=="")
       {
          alert("请选择仓库！");
          return false;
       }
       var ids = "";
       var json_str = "[";
       var index = 0;
       $("tr.abc").each(function(){
           var goodId = $(this).children("td").children(".goodId").val().replace(/(^\s*)|(\s*$)/g, "");
           var amount = $(this).children("td").children(".amount").val().replace(/(^\s*)|(\s*$)/g, "");
           if(null == goodId || goodId == "" || goodId.length == 0){
             alert("请选择商品！");
             can_submit = false;
             return false;
           } else if(null == amount || amount == "" || amount.length == 0){
             alert("请输入数量！");
             can_submit = false;
             return false;
           } else if(isNaN(amount))
           {
             alert("数量应为数字格式！");
             can_submit = false;
             return false;
           } else{
               if(ids.indexOf(goodId +",") == 0 ||ids.indexOf("," + goodId +",") > 0){
                   alert("商品重复！");
                   can_submit = false;
                   return false;
               }else{
                   ids += goodId +",";
                   if(index > 0){
                      json_str += ",";
                   }
                   json_str += "{goodId:" + goodId + ", amount:" + amount + "}";
               }
           }
           index++;
       });
       json_str += "]";

       if(!can_submit){
           return false;
       }

       $.ajax({
                //保存处理代码
       });
    }

    function addTableBill()
    {
       var lastRowNum=jQuery("#tblBillHid").val();
       var tblEment=jQuery("#tblBill");
       var rowHTML="<tr class='abc'><td><select class='goodId' id='goodId' name='goodId' style='width:120px'>"+
               "<option value=''>--------</option>"+
               "<c:forEach items='${gList}' var='glist'>"+
               "<option value='${glist.goodId}'>${glist.goodName}</option>"+
               "</c:forEach></select></td>"+
               "<td><input type='text' size='10' id='amount' class='amount' name='amount' value=''/> <font color='red'>*</font></td>"+
               "<td><input type='button' value='删除' οnclick='delTableBill()' style='cursor: pointer; color:#F00; font-size:12px;' /></td>"+
               "</tr>";
       jQuery("#tblBill tr:eq("+(parseInt(lastRowNum)-1)+")" ).after(rowHTML);
       var rowNum=parseInt(lastRowNum)+1;
       jQuery("#tblBillHid").val(rowNum);
    }

    function delTableBill(){
       var lastRowNum=jQuery("#tblBillHid").val();
       if(parseInt(lastRowNum)>2){
          document.getElementById("tblBill").deleteRow(parseInt(lastRowNum)-1);
          var rowNum=parseInt(lastRowNum)-1;
          jQuery("#tblBillHid").val(rowNum);
       }
    }
</script>
</head>
<body>
   <div align="center">

     <table class="form" cellpadding="0" cellspacing="0" border="0">
      <tr>
       <td align="right">         仓库名称</td>
       <td align="left">
        <select id="storageId" name="storageId" style="width=100">
           <option value="">--------</option>
           <c:forEach items="${sList}" var="slist">
             <option value="${slist.storageId}">${slist.storageName}</option>
           </c:forEach>
        </select>
       </td>
      </tr>

      <tr>
        <td colspan="2">
          <table class="subtable" id="tblBill" name="tblBill" style="text-align:center;margin-left:290px;">
            <tr>
             <td>商品名称</td>
             <td>数量</td>
             <td></td>
            </tr>
            <tr class="abc">
             <td>
              <select class="goodId" id="goodId" name="goodId" style="width:120px;">
               <option value="">--------</option>
               <c:forEach items="${gList}" var="glist">
                <option value="${glist.goodId}">${glist.goodName}</option>
               </c:forEach>
              </select>
             </td>

             <td>
              <input type="text" size="10" class="amount" id="amount" name="amount" value=""/><font color='red'>*</font>
             </td>

             <td>
              <input type="button" value="删除" οnclick="delTableBill()" style="cursor: pointer; color:#F00; font-size:12px;" />
              <input type="hidden" id="tblBillHid" name="tblBillHid" value="2"/>
             </td>
           </tr>
          </table>
        </td>
      </tr>
      <tr>
       <td colspan="2">
          <input type="button" value="添加" class="ea-btn-green" οnclick="addTableBill()" style="cursor: pointer; margin-left:330px;" />
          <input type="button" value="提交" class="ea-btn-green" οnclick="saveInStorage()" style="margin-left:5px;" />
        </td>
      </tr>
     </table>
   </div>
</body>
</html>