文档章节

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

开源蜗牛
 开源蜗牛
发布于 2014/05/29 15:15
字数 463
阅读 1104
收藏 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>

截图效果如下:

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 完全卸载MySql
下一篇: Struts实现验证码
开源蜗牛
粉丝 6
博文 10
码字总数 1684
作品 0
广州
程序员
私信 提问
构建一个简易 JavaScript 数据访问层

简介: 本文逐步描述完成以下任务的全过程:在 PHP 中构建一个针对后端的数据库访问包装器并将其连接到用户界面层中的一个 JavaScript 访问包装器。 简单 JavaScript 数据访问介绍 您想快速构...

IBMdW
2011/05/04
340
0
javascript在asp.net中运用

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

crossmix
2015/04/19
0
0
让您的 web 应用程序飞起来

本文向您介绍如何通过在您的 CSS 和 JavaScript 文件中 — 两种易于优化的常见资源,使用社区中提供的工具即可完成优化 — 优化空间使用来实现更高的性能。然而,在继续之前,有一点是很重要...

IBMdW
2011/09/21
2.7K
2
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.8K
1
使用 JavaScript 创建你的第一个 Metro 风格应用

本教程介绍了使用 JavaScript 创建 Metro 风格应用所需的基本代码和工具。你使用 HTML5、层叠样式表 Level 3 (CSS3) 和适用于 JavaScript 的 Windows 库来定义 UI,使用 JavaScript 来编写应...

红薯
2012/03/01
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部