用JavaScript實現自動添加行和刪除行

時間 2019-11-29

標籤 javascript 實現自動添加刪除欄目 JavaScript 简体版

原文原文鏈接

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

002 <%

003 String path = request.getContextPath();

004 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

005 %>

006 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

007 <html>

008 <head>

009 <base href="<%=basePath%>">

010 <link rel="stylesheet" href="css/bootstraps.css" type="text/css" media="all">

011 <link rel="stylesheet" href="css/mcontainer.css" type="text/css" media="all">

012

013 <title>管理員主頁</title>

014

015 <meta http-equiv="pragma" content="no-cache">

016 <meta http-equiv="cache-control" content="no-cache">

017 <meta http-equiv="expires" content="0">

018 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

019 <meta http-equiv="description" content="This is my page">

020 <!--

021 <link rel="stylesheet" type="text/css" href="styles.css">

022 -->

023 </head>

024 <script language="javascript">

025 function addSelect(tbodyID)

026 {

027 var bodyObj=document.getElementById(tbodyID);

028 if(bodyObj==null)

029 {

030 alert("Body of Table not Exist!");

031 return;

032 }

033 var rowCount = bodyObj.rows.length;

034 var cellCount = bodyObj.rows[0].cells.length;

035 var newRow = bodyObj.insertRow(rowCount++);

036 for(var i=0;i<cellCount;i++)

037 {

038 var cellHTML = bodyObj.rows[0].cells[i].innerHTML;

039

040 if(cellHTML.indexOf("none")>=0)

041 {

042 cellHTML = cellHTML.replace("none","");

043 }

044 newRow.insertCell(i).innerHTML=cellHTML;

045 }

046 bodyObj.rows[rowCount-1].cells[0].innerHTML = "選項"+rowCount+":";

047 bodyObj.rows[rowCount-1].cells[1].innerHTML =

048 bodyObj.rows[rowCount-1].cells[1].innerHTML.replace("value1","selectNames");

049 }

050

051 function removeSelect(inputobj)

052 {

053 var bodyObj=document.getElementById("myTable");

054 var rowCount = bodyObj.rows.length;

055 if(rowCount == 2)return;

056 if(inputobj==null) return;

057 var parentTD = inputobj.parentNode;

058 var parentTR = parentTD.parentNode;

059 var parentTBODY = parentTR.parentNode;

060 parentTBODY.removeChild(parentTR);

061 }

062 </script>

063 <body>

064 <center>

065 <h3>添加投票</h3>

066 <form action="" method="post">

067 <table width="50%" border="1">

068 <tr>

069 <td>單選：</td>

070 <td><input type="radio" name ="pattern" value="Single"/></td>

071 <td></td>

072 </tr>

073 <tr>

074 <td>多選：</td>

075 <td><input type="radio" name ="pattern" value="Manay"/></td>

076 <td><label style="color:red;">${patternError}</label></td>

077 </tr>

078 <tr>

079 <td>主題名：</td>

080 <td><input type="text" required="true" name ="themeName" /></td>

081 <td><label style="color:red;">${theme_SameName}</label></td>

082 </tr>

083 <tbody id="myTable">

084 <tr>

085 <td>選項1：</td>

086 <td>

087 <input type="text" required="true" id="values1" name="selectNames"/>

088 </td>

089 <td align="left">

090 <input type=button value="刪除選項" onclick="removeSelect(this)"/>

091 </td>

092 </tr>

093 <tr>

094 <td>選項2：</td>

095 <td>

096 <input type="text" required="true" id="values1" name="selectNames"/>

097 </td>

098 <td align="left">

099 <input type=button value="刪除選項" onclick="removeSelect(this)"/>

100 </td>

101 </tr>

102 </tbody>

103 <tr>

104 <td><input type=button value="增長選項" onclick="addSelect('myTable')"/></td>

105 <td></td>

106 <td></td>

107 </tr>

108 </table>

109 <input type="submit" value="提交">

110 </form>

111 </center>

112 </body>

113 </html>

截圖效果以下：javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。