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

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>

截图效果如下：