a. 利用按鈕，動態加入 textbox
a. Use button to add textbox dynamically
程式碼 ：011.html
Code : 011.html
<body>
<form id="form1" name="form1" method="post" action="">
<input type="button" value="ADD" onclick="addtxt()" />
</form>
</body>
</html>
<script>
function addtxt()
{
var para = document.createElement('p'); //建立 p 標籤，名為 para
// create p tag and name it as para
var info = document.createTextNode('請輸入：'); //定義 info 為一串文字
// define info as string
var txt = document.createElement('input'); //建立 input 標籤
// create input tag
txt.type = 'text'; //定義 input 標籤 ( txt )的形式為 text，也就是 textbox 標籤
// define input tag (txt) as text from, it is also as textbox tag
para.appendChild(info);
para.appendChild(txt);
document.getElementById('form1').appendChild(para);
}
</script>
執行結果：
Result:
b. 輸入文字後，送到 jsp 顯示資料
b. send the string in the textbox to jsp and display data
程式碼：011.html
Code: 011.html
<script>
var i = 1;
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="012.jsp">
<p>
<input type="button" value="ADD" onclick="add()" />
</p>
<p>
<input type="submit" name="button" id="button" value="送出" />
</p>
</form>
</body>
</html>
<script>
function add()
{
var para = document.createElement('p');
var info = document.createTextNode('Para ' + i + ':');
var txt = document.createElement('input');
txt.type = 'text';
txt.name = 'para' + i;
txt.id = 'para' + i;
i++;
para.appendChild(info);
para.appendChild(txt);
var myform = document.getElementById('form1').appendChild(para);
}
</script>
程式碼：012.jsp
code : 012.jsp
<%
Enumeration e = (Enumeration) request.getParameterNames();
while(e.hasMoreElements())
{
String parName=(String)e.nextElement();
if (parName.startsWith("para"))
out.println(parName+":" + request.getParameter(parName) + "<br>");
}
%>
c. 按一下按鈕，圖片換位置
c. click the button, picture change place
程式碼：013.html
code: 013.html
<style type="text/css">
div {
background-color: #FF3;
height: 300px;
width: 800px;
border: 2px solid #00F;
}
</style>
<script>
function myclick()
{
var myimg = document.getElementById('img1');
var divlower = document.getElementById('lower');
var divupper = document.getElementById('upper');
if ( myimg.parentNode == divupper )
{
divlower.appendChild(myimg);
}
else
{
divupper.appendChild(myimg);
}
}
</script>
</head>
<body>
<div id="upper">
<img src="Sunset.jpg" name="img1" width="300" id="img1" />
</div>
<div id="lower"></div>
<p>
<input type="submit" name="button" id="button" value="送出" onclick="myclick()" />
</p>
</body>
執行結果：
Result:
No comments:
Post a Comment