使用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>

截图效果如下：

转载于:https://my.oschina.net/kaiyuanwoniu/blog/270671

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

各种页面刷新代码大全,asp/javascript刷新页面代码
页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面. 1) 10表示间隔10秒刷新一次 2) <script> window.location.re ...
Javascript倒计时页面跳转
Javascript倒计时页面跳转在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type=&quo ...
javascript实现页面的重新加载和页面的刷新
1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...
html页面实现自动刷新或自动跳转
html页面实现自动刷新 1.页面自动刷新(H5格式的html页面,只需要在head中添加)  <meta http-equiv=& ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）
这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...
利用EntLib授权机制实现对ASP.NET页面的自动授权
ASP.NET默认采用UrlAuthorizationModule和FileAuthorizationModule分别实现针对请求地址和物理文件的授权,但是在很多情况下我们需要额外的授权方式.Entl ...
linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素，访问方法：getElementById() - phpStudy...
DOM和JAVASCRIPT访问页面上的元素访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...

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

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

最新文章

热门文章