使用JavaScript实现页面选项自动添加行以及删除行 javaweb
使用JavaScript实现页面选项自动添加行以及删除行 javaweb
开源蜗牛 发表于4年前
使用JavaScript实现页面选项自动添加行以及删除行 javaweb
  • 发表于 4年前
  • 阅读 1093
  • 收藏 2
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 在完成JSP的综合性实验中,需要用到这个技巧。具体实现方法如下,可以直接复制代码进入jsp,直接看到效果,望有用!
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
     <link rel="stylesheet" href="css/bootstraps.css" type="text/css" media="all">
 <link rel="stylesheet" href="css/mcontainer.css" type="text/css" media="all">
    
    <title>管理员主页</title>
    
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  </head>
   <script language="javascript">
   function addSelect(tbodyID)  
 {  
     var bodyObj=document.getElementById(tbodyID);  
     if(bodyObj==null)   
     {  
         alert("Body of Table not Exist!");  
         return;  
     }  
     var rowCount = bodyObj.rows.length;  
     var cellCount = bodyObj.rows[0].cells.length;  
     var newRow = bodyObj.insertRow(rowCount++);    
     for(var i=0;i<cellCount;i++)  
     {  
          var cellHTML = bodyObj.rows[0].cells[i].innerHTML;  
          
          if(cellHTML.indexOf("none")>=0)  
          {  
              cellHTML = cellHTML.replace("none","");  
          }
          newRow.insertCell(i).innerHTML=cellHTML;  
     }  
   bodyObj.rows[rowCount-1].cells[0].innerHTML = "选项"+rowCount+":"; 
   bodyObj.rows[rowCount-1].cells[1].innerHTML =  
   bodyObj.rows[rowCount-1].cells[1].innerHTML.replace("value1","selectNames"); 
 } 
 
 function removeSelect(inputobj)  
 {  
  var bodyObj=document.getElementById("myTable");
  var rowCount = bodyObj.rows.length; 
  if(rowCount == 2)return;
     if(inputobj==null) return;  
     var parentTD = inputobj.parentNode;  
     var parentTR = parentTD.parentNode;  
     var parentTBODY = parentTR.parentNode;  
     parentTBODY.removeChild(parentTR);  
 }  
   </script>
  <body>
     <center>
   <h3>添加投票</h3>
     <form action="" method="post">
    <table width="50%" border="1">
     <tr>
      <td>单选:</td>
      <td><input type="radio" name ="pattern" value="Single"/></td>
      <td></td>
     </tr>
     <tr>
      <td>多选:</td>
      <td><input type="radio" name ="pattern" value="Manay"/></td>
      <td><label style="color:red;">${patternError}</label></td>
     </tr>
      <tr>
       <td>主题名:</td>
       <td><input type="text" required="true" name ="themeName" /></td>
       <td><label style="color:red;">${theme_SameName}</label></td>
      </tr>
     <tbody id="myTable">
      <tr>
       <td>选项1:</td>
       <td>
       <input type="text" required="true" id="values1" name="selectNames"/>
       </td>
       <td align="left">
        <input type=button value="删除选项" onclick="removeSelect(this)"/>
       </td>
      </tr>
      <tr>
       <td>选项2:</td>
       <td>
       <input type="text" required="true" id="values1" name="selectNames"/>
       </td>
       <td align="left">
        <input type=button value="删除选项" onclick="removeSelect(this)"/>
       </td>
      </tr>
      </tbody>
      <tr>
    <td><input type=button value="增加选项" onclick="addSelect('myTable')"/></td>  
    <td></td>
    <td></td> 
   </tr> 
  </table>
      <input type="submit" value="提交">
     </form>
   </center>
  </body>
</html>

截图效果如下:

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 10
码字总数 1684
×
开源蜗牛
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: