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 快速排序函数代码
May 30 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
详解关于微信setData回调函数中的坑
Feb 18 Javascript
vue遍历对象中的数组取值示例
Nov 07 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文章按日期(月日)SQL归档语句
2012/11/29 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
web打印小结
2017/01/11 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Python中方法链的使用方法
2016/02/23 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
费用会计岗位职责
2014/01/01 职场文书
小学生成长感言
2014/01/30 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
本科毕业生自荐信
2014/05/26 职场文书
工作自我评价范文
2015/03/05 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
婚育证明格式
2015/06/17 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书