JSP中使用JavaScript动态插入删除输入框实现代码

 更新时间:2014年06月13日 09:00:01   投稿:whsnow  
这篇文章主要介绍了JSP中如何使用JavaScript动态插入删除输入框,需要的朋友可以参考下
JavaScript代码:
复制代码 代码如下:

<script language="javascript">
function addrows(){
var len = optionlist.rows.length; //得到table的行数
var obj = optionlist.insertRow(len);//在最后一行插入
/**插入第一列**/
obj.insertCell(0);
obj.cells(0).innerHTML="选项" + (len+1) + ":<input type=text name=option size=28>";
}
function deleterow(){
var len = optionlist.rows.length;
if(len <= 1) {
alert("至少要有一个选项");
}
else {
optionlist.deleteRow(len-1);//删除最后一项
}
}
function getOptionCount(){
return optionlist.rows.length;
}
</script>

Jsp页面中的关键代码
复制代码 代码如下:

<input type="button" id="bt1" value="添加选项" onClick="addrows();">
<input type="button" id="bt2" value="删除选项" onClick="deleterow();">

设置table的id以便JavaScript中能识别该table
复制代码 代码如下:

<table id="optionlist">
</table>

相关文章

  • 改进UCHOME的记录发布,增强可访问性用户体验

    改进UCHOME的记录发布,增强可访问性用户体验

    今天是看到UCDChina上的一篇文章文章 ,是关于SNS的用户体验问题,发觉文中提到的第一个细节,UCHOME就做的不好,于是改进了一下。
    2011-01-01
  • div移动 输入框不能输入的问题

    div移动 输入框不能输入的问题

    使用了移动层,可里面的输入框却不能使用了,下面是解决方法需要的朋友可以参考下。
    2009-11-11
  • js 复制或插入Html的实现方法小结

    js 复制或插入Html的实现方法小结

    很多情况下是用innerHTML或innerText,现在比较流行直接的dom操作,大家可以根据需要选择。
    2010-05-05
  • 第九篇Bootstrap导航菜单创建步骤详解

    第九篇Bootstrap导航菜单创建步骤详解

    这篇文章主要介绍了Bootstrap导航菜单创建步骤详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js canvas实现写字动画效果

    js canvas实现写字动画效果

    这篇文章主要为大家详细介绍了js canvas实现写字动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript随机生成信用卡卡号的方法

    JavaScript随机生成信用卡卡号的方法

    这篇文章主要介绍了JavaScript随机生成信用卡卡号的方法,涉及javascript操作随机随机数生成信用卡卡号的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 使用GruntJS构建Web程序之安装篇

    使用GruntJS构建Web程序之安装篇

    Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等。
    2014-06-06
  • 详解JavaScript 作用域

    详解JavaScript 作用域

    这篇文章主要介绍了JavaScript 作用域的相关资料,文中讲解非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 初步了解javascript面向对象

    初步了解javascript面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装、继承、多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值、对象或函数
    2015-11-11
  • 用js简单提供增删改查接口

    用js简单提供增删改查接口

    这篇文章主要介绍了用js简单提供增删改查接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论