使用JavaScript实现页面选项自动添加行以及删除行 javaweb

最新推荐文章于 2019-03-29 19:41:06 发布

转载最新推荐文章于 2019-03-29 19:41:06 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kaiyuanwoniu/blog/270671

文章标签：

#javascript #java #python #ViewUI

本文指导您如何使用HTML和JavaScript创建包含单选题、多选题、主题输入和选项输入的投票表单，并通过增加和删除选项的功能实现个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<%@ 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>

截图效果如下：