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实现unicode和字符的互相转换
Jul 18 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JS图片懒加载的优点及实现原理
Jan 10 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在线生成ico文件的代码
2007/10/09 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP创建XML接口示例
2019/07/04 PHP
接收键盘指令的脚本
2006/06/26 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
javascript工具库代码
2012/03/29 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
webpack优化的深入理解
2018/12/10 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python新手实现2048小游戏
2015/03/31 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python如何实现图片压缩
2020/09/11 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
2014年大学生四年规划书范文
2014/04/03 职场文书
入党介绍人评语
2014/05/06 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
力克胡哲观后感
2015/06/10 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
MySQL kill不掉线程的原因
2021/05/07 MySQL
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL