文档章节

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

开源蜗牛
 开源蜗牛
发布于 2014/05/29 15:15
字数 463
阅读 1103
收藏 2
<%@ 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
作品 0
广州
程序员
javascript在asp.net中运用

Net是微软公司下一代的战略核心,ASP.Net是.Net战略在Web开发方面的具体实现。它继承了ASP的简单性和易用性,同时克服了ASP程序结构化较差,难于阅读和理解的缺点。特别是服务器端控件和事件...

crossmix
2015/04/19
0
0
The story behind _references.js 简译一下

references.js背后的故事 references.js是在VS的WEB项目中,提供智能提示的关键技术。 在VS2010发布之后,作者还是ASP.NET小组成员时,小组想把js编辑器的功能迁移到一个新的“客户端平台小组...

noonoo
2015/08/04
0
0
【译】使用 Webpack 和 Poi 构建更好的 JavaScript 应用

译者注:最近看到 Poi 这个也是打着零配置特点(Parcel:莫名躺枪?)的 JavaScript 打包工具,发现其在 Github 有着 3000+ Star 的同时在中文世界里热度却较低,因此在 Medium 上找了一篇文...

逆葵
07/12
0
0
Atom 1.30.0 正式发布,带来多项稳定更新

Atom 1.30.0 正式发布了,Atom 是 GitHub 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持 CSS,HTML,JavaScript 等网页编程语言。它支持...

达尔文
08/29
0
2
【WebStorm】前端工具开发利器webstrom专篇...更新中

【亲身实测】 WebStorm混搭svn WebStorm混搭nodeJS 以less和uglify-js为例 如何用npm在root中下载模块 【网络转帖】 webstorm简单介绍 官网地址:http://www.jetbrains.com/webstorm/feature...

呢喃的猫咪
2013/06/15
0
3

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
23分钟前
0
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
45分钟前
3
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
53分钟前
1
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
21
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部