當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用JavaScript实现页面选项自动添加行以及删除行 javaweb
生活随笔
收集整理的這篇文章主要介紹了
使用JavaScript实现页面选项自动添加行以及删除行 javaweb
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%> <% String?path?=?request.getContextPath(); String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"> <html><head><base?href="<%=basePath%>"><link?rel="stylesheet"?href="css/bootstraps.css"?type="text/css"?media="all"><link?rel="stylesheet"?href="css/mcontainer.css"?type="text/css"?media="all"><title>管理員主頁</title><meta?http-equiv="pragma"?content="no-cache"><meta?http-equiv="cache-control"?content="no-cache"><meta?http-equiv="expires"?content="0">????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3"><meta?http-equiv="description"?content="This?is?my?page"><!--<link?rel="stylesheet"?type="text/css"?href="styles.css">--></head><script?language="javascript">function?addSelect(tbodyID)??{??var?bodyObj=document.getElementById(tbodyID);??if(bodyObj==null)???{??alert("Body?of?Table?not?Exist!");??return;??}??var?rowCount?=?bodyObj.rows.length;??var?cellCount?=?bodyObj.rows[0].cells.length;??var?newRow?=?bodyObj.insertRow(rowCount++);????for(var?i=0;i<cellCount;i++)??{??var?cellHTML?=?bodyObj.rows[0].cells[i].innerHTML;??if(cellHTML.indexOf("none")>=0)??{??cellHTML?=?cellHTML.replace("none","");??}newRow.insertCell(i).innerHTML=cellHTML;??}??bodyObj.rows[rowCount-1].cells[0].innerHTML?=?"選項"+rowCount+":";?bodyObj.rows[rowCount-1].cells[1].innerHTML?=??bodyObj.rows[rowCount-1].cells[1].innerHTML.replace("value1","selectNames");?}?function?removeSelect(inputobj)??{??var?bodyObj=document.getElementById("myTable");var?rowCount?=?bodyObj.rows.length;?if(rowCount?==?2)return;if(inputobj==null)?return;??var?parentTD?=?inputobj.parentNode;??var?parentTR?=?parentTD.parentNode;??var?parentTBODY?=?parentTR.parentNode;??parentTBODY.removeChild(parentTR);??}??</script><body><center><h3>添加投票</h3><form?action=""?method="post"><table?width="50%"?border="1"><tr><td>單選：</td><td><input?type="radio"?name?="pattern"?value="Single"/></td><td></td></tr><tr><td>多選：</td><td><input?type="radio"?name?="pattern"?value="Manay"/></td><td><label?style="color:red;">${patternError}</label></td></tr><tr><td>主題名：</td><td><input?type="text"?required="true"?name?="themeName"?/></td><td><label?style="color:red;">${theme_SameName}</label></td></tr><tbody?id="myTable"><tr><td>選項1：</td><td><input?type="text"?required="true"?id="values1"?name="selectNames"/></td><td?align="left"><input?type=button?value="刪除選項"?onclick="removeSelect(this)"/></td></tr><tr><td>選項2：</td><td><input?type="text"?required="true"?id="values1"?name="selectNames"/></td><td?align="left"><input?type=button?value="刪除選項"?onclick="removeSelect(this)"/></td></tr></tbody><tr><td><input?type=button?value="增加選項"?onclick="addSelect('myTable')"/></td>??<td></td><td></td>?</tr>?</table><input?type="submit"?value="提交"></form></center></body> </html>截圖效果如下：
?
轉(zhuǎn)載于:https://my.oschina.net/kaiyuanwoniu/blog/270671
總結(jié)
以上是生活随笔為你收集整理的使用JavaScript实现页面选项自动添加行以及删除行 javaweb的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 快速配置Ehcache
- 下一篇： bitmapdata的知识点