文档章节

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

开源蜗牛
 开源蜗牛
发布于 2014/05/29 15:15
字数 463
阅读 1100
收藏 2
点赞 0
评论 0
<%@ 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
【WebStorm】前端工具开发利器webstrom专篇...更新中

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

呢喃的猫咪
2013/06/15
0
3
提升Web应用程序性能的最佳实践

导读:作为开发人员,Web页面加载或刷新的速度对其网站至关重要。在浏览器中调整性能问题比在Java应用程 序中更难。开发人员在各种浏览器中调试JavaScript的方法要少得多。比如,在Mozilla F...

DustLeon
2012/02/19
0
0
一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天
04/27
0
0
【翻译】Flask大型教程|第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。...

一进制
04/18
0
0
kindeditor4.x整合SyntaxHighlighter代码高亮

kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,不过因为SyntaxHighlighter的应用...

度外网络
2012/08/26
0
4
【CF 应用开发大赛】巨能搜,聚合搜索应用

应用名称:巨能搜 应用URL地址:http://searchx.cloudfoundry.com/ 开源地址:http://code.google.com/p/searchx/ 应用说明及使用场景: 出于个人兴趣制作的聚合搜索应用,方便扩展,简单实用...

翟磊
2013/01/03
0
40
JavaScript的初步探索(JS的入坑笔录)

Java script简称js,是web学习的一个重要组成部分。 首先,Js是什么?JS简介: 这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 它是一种浏览...

青衫无名
06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
7分钟前
0
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
17分钟前
0
0
设计模式:代理模式

代理模式可以分为三种:静态代理,动态代理,cglib代理 1.静态代理:被代理的类需要实现一接口或是继承一父类 委托类(被代理的类): package com.java.pattern.proxy.staticdemo;publ...

人觉非常君
20分钟前
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
25分钟前
0
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
26分钟前
0
0
TensorFlow,从一个 Android Demo 开始

TensorFlow Android Demo 项目地址 Machine Learning 既然提到了 TensorFlow,那是不是得神经网络、机器学习了解下? 如果你能坚持把 机器学习速成课程 给啃完了,觉得还挺有兴趣的,那可以考...

孟飞阳
28分钟前
0
0
JVM学习笔记二:内存结构规范

1、JVM基本结构图 2、java堆(Heap) 3、方法区(Method Area) 4、程序计数器 5、JAVA栈图解 局部变量表:八大基本类型,还可以存储引用类型 上一篇:JVM学习笔记一:类加载机制介绍...

刘祖鹏
33分钟前
0
0
mui集成微信H5支付(返回白屏问题已经解决)

一.项目需求 因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目...

银装素裹
37分钟前
0
0
SpringBoot集成Redis--配置自定义的RedisCacheManager

配置自定义的RedisCacheManager--1自定义键生成规则 默认的键生成器 当不指定缓存的key时,SpringBoot会使用SimpleKeyGenerator生成key。 SimpleKeyGenerator SimpleKey 查看源码可以发现,它...

karma123
56分钟前
0
0
防火墙未来的发展趋势在哪里?

导读 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网。当下互联网时代,无论是大小企业,大部分都会部署有防火墙的设备,但这些防火墙往往并不...

问题终结者
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部