JSP中使用JavaScript動(dòng)態(tài)插入刪除輸入框?qū)崿F(xiàn)代碼
更新時(shí)間：2014年06月13日 09:00:01 投稿：whsnow
這篇文章主要介紹了JSP中如何使用JavaScript動(dòng)態(tài)插入刪除輸入框,需要的朋友可以參考下
JavaScript代碼：
<script language="javascript">
function addrows(){
var len = optionlist.rows.length; //得到table的行數(shù)
var obj = optionlist.insertRow(len);//在最后一行插入
/**插入第一列**/
obj.insertCell(0);
obj.cells(0).innerHTML="選項(xiàng)" + (len+1) + "：<input type=text name=option size=28>";
}
function deleterow(){
var len = optionlist.rows.length;
if(len <= 1) {
alert("至少要有一個(gè)選項(xiàng)");
}
else {
optionlist.deleteRow(len-1);//刪除最后一項(xiàng)
}
}
function getOptionCount(){
return optionlist.rows.length;
}
</script>
Jsp頁面中的關(guān)鍵代碼
<input type="button" id="bt1" value="添加選項(xiàng)" onClick="addrows();">
<input type="button" id="bt2" value="刪除選項(xiàng)" onClick="deleterow();">
設(shè)置table的id以便JavaScript中能識(shí)別該table
<table id="optionlist">
</table>
復(fù)制代碼 代碼如下:
<script language="javascript">
function addrows(){
var len = optionlist.rows.length; //得到table的行數(shù)
var obj = optionlist.insertRow(len);//在最后一行插入
/**插入第一列**/
obj.insertCell(0);
obj.cells(0).innerHTML="選項(xiàng)" + (len+1) + "：<input type=text name=option size=28>";
}
function deleterow(){
var len = optionlist.rows.length;
if(len <= 1) {
alert("至少要有一個(gè)選項(xiàng)");
}
else {
optionlist.deleteRow(len-1);//刪除最后一項(xiàng)
}
}
function getOptionCount(){
return optionlist.rows.length;
}
</script>
Jsp頁面中的關(guān)鍵代碼
復(fù)制代碼 代碼如下:
<input type="button" id="bt1" value="添加選項(xiàng)" onClick="addrows();">
<input type="button" id="bt2" value="刪除選項(xiàng)" onClick="deleterow();">
設(shè)置table的id以便JavaScript中能識(shí)別該table
復(fù)制代碼 代碼如下:
<table id="optionlist">
</table>
相關(guān)文章
改進(jìn)UCHOME的記錄發(fā)布，增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章 ，是關(guān)于SNS的用戶體驗(yàn)問題，發(fā)覺文中提到的第一個(gè)細(xì)節(jié)，UCHOME就做的不好，于是改進(jìn)了一下。2011-01-01
使用了移動(dòng)層，可里面的輸入框卻不能使用了，下面是解決方法需要的朋友可以參考下。2009-11-11
js 復(fù)制或插入Html的實(shí)現(xiàn)方法小結(jié)
很多情況下是用innerHTML或innerText,現(xiàn)在比較流行直接的dom操作，大家可以根據(jù)需要選擇。2010-05-05
第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
這篇文章主要介紹了Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
js canvas實(shí)現(xiàn)寫字動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)寫字動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript隨機(jī)生成信用卡卡號(hào)的方法
這篇文章主要介紹了JavaScript隨機(jī)生成信用卡卡號(hào)的方法,涉及javascript操作隨機(jī)隨機(jī)數(shù)生成信用卡卡號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
Gruntjs是JavaScript項(xiàng)目的構(gòu)建工具，也是基于node的一個(gè)命令行工具。很多開源JS項(xiàng)目都是使用它搭建。如jQuery、Qunit、CanJS等。2014-06-06
這篇文章主要介紹了JavaScript 作用域的相關(guān)資料，文中講解非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了用js簡單提供增刪改查接口,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05