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


Posted in Javascript onJune 13, 2014

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>
Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 #Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 #Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 #Javascript
js获取当前页面的url网址信息
Jun 12 #Javascript
jquery 3D 标签云示例代码
Jun 12 #Javascript
javascript面向对象特性代码实例
Jun 12 #Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 #Javascript
You might like
测试您的 PHP 水平的题目
2007/05/30 PHP
php 无限分类的树类代码
2009/12/03 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
php中数组最简单的使用方法
2020/12/27 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Numpy 多维数据数组的实现
2020/06/18 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
广告词串烧
2014/03/19 职场文书
揭牌仪式主持词
2014/03/19 职场文书
环保建议书100字
2014/05/14 职场文书
奠基仪式策划方案
2014/05/15 职场文书
给病人的慰问信
2015/03/23 职场文书
民间借贷被告代理词
2015/05/23 职场文书
婚庆司仪开场白
2015/05/29 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis