繼續改為Part 2的目的是要建立後台餵值的下拉選單。
從Part 1繼續增加，從後台餵資料到TextBox1，前台使用後台所餵之TextBox1文字資料，拆解後產生DropDownList的選項項目。
1 .按「增加一筆」可繼續往下面增加一列項次的輸入欄位。
2. 每列右邊提供「Delete」刪除鈕，可刪除該列項次之輸入欄位。
3. 刪除到只剩一筆便會提示不得再刪除。
4. 按「儲存」會postback，並取得所有項目欄位之輸入值。取得值請再自行過濾運用，空值表示該列項次已刪除。
5. 每一列增加的高度就用各輸入欄位前的span來控制，如果沒加上span控制高度，因TextBox、DropDownList、RadioButton各添加出的高度不一，新增多筆後，會無法橫向對齊。
6. 「位置」欄位的下拉選單，是從後台所設的資料值，從後台所設的資料值，也可以從資料庫取值，使這些資料庫的值成為下拉選單的項次。
7. Body加onload="insert_data_1();"，目的為將後台所寫到TextBox1的值，拆解後，組合成下拉選單並塞入td6_1的span中，成為第一列資料的下拉選單。因為在Page_Load時設TextBox1值時無法同時使用jQuery取TextBox1值塞入成為下拉選單，故改用onload方式取值並建立下拉選單。
以下程式，標示紅字為從Part 1繼續增加之程式，就是建立後台餵值的下拉選單。
test1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test1.aspx.cs" Inherits="test1" debug="True" %>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#button1").click(addItem);
});
function addItem()
{
var next_number = document.getElementById("Count");
var c = next_number.value;
var now_records = document.getElementById("Count_now_records");
var c_now_records = now_records.value;
var box1 = "<span style='display: inline-block;height: 24px;' id='td1_" + c + "'><input type='text' id='TextBox_Username" + c + "' name='TextBox_Username" + c + "' value='this is Username" + c + "' /></span><br />";
$("#TextBoxDiv1 > span:last").each(function() { $(this).next().after(box1); });
//$("#TextBoxDiv1 > span:first").each(function() { $(this).before(box1); }); //新增的項次加在最前項
var box2 = "<span style='display: inline-block;height: 24px;' id='td2_" + c + "'><input type='text' id='TextBox_Tel" + c + "' name='TextBox_Tel" + c + "' value='this is TextBox_Tel" + c + "' /></span><br />";
$("#TextBoxDiv2 > span:last").each(function() { $(this).next().after(box2); });
//$("#TextBoxDiv2 > span:first").each(function() { $(this).before(box2); }); //新增的項次加在最前項
var rlist1 = "<span style='display: inline-block;height: 24px;' id='td3_" + c + "'><select id='DropDownList_" + c + "' name='DropDownList_" + c + "'><option value='男'>男</option><option value='女'>女</option></select></span><br />";
$("#DropDownListDiv1 > span:last").each(function() { $(this).next().after(rlist1); });
//$("#DropDownListDiv1 > span:first").each(function() { $(this).before(rlist1); }); //新增的項次加在最前項
var rbutton1 = "<span style='display: inline-block;height: 24px;' id='td4_" + c + "'><input type='radio' id='RadioButton_" + c + "' name='RadioButton_" + c + "' value='0' ><label id='LabelA_" + c + "' name='LabelA_" + c + "'>葷</label><input type='radio' id='RadioButton_" + c + "' name='RadioButton_" + c + "' value='1' ><label id='LabelB_" + c + "' name='LabelB_" + c + "'>素</label></span><br />";
$("#RadioButtonDiv1 > span:last").each(function() { $(this).next().after(rbutton1); });
//$("#RadioButtonDiv1 > span:first").each(function() { $(this).before(rbutton1); }); //新增的項次加在最前項
var button1 = "<span style='display: inline-block;height: 24px;' id='td5_" + c + "'><input type='button' value='Delete' id='deleteButton" + c + "' name='deleteButton" + c + "' onclick='delete_item(" + c + ")' ></span><br />";
$("#ButtonDiv1 > span:last").each(function() { $(this).next().after(button1); });
//$("#ButtonDiv1 > span:first").each(function() { $(this).before(button1); }); //新增的項次加在最前項
var rlist2 = "<span style='display: inline-block;height: 24px;' id='td6_" + c + "'><select id='DDL_" + c + "' name='DDL_" + c + "'>" + insert_data_2() + "</select></span><br />";
$("#DropDownListDiv2 > span:last").each(function() { $(this).next().after(rlist2); });
var count = Number(c) + 1;
next_number.value = count;
var count_now_records = Number(c_now_records) + 1;
now_records.value = count_now_records;
}
</script>
<script type="text/javascript">
function delete_item(item) {
if (Number(document.getElementById("Count_now_records").value) > 1) {
alert(item);
var now_records = document.getElementById("Count_now_records");
var c_now_records = now_records.value;
var count_now_records = Number(c_now_records) - 1;
now_records.value = count_now_records;
//刪除<br>空行
$("#td1_" + item + " + br").remove();
$("#td2_" + item + " + br").remove();
$("#td3_" + item + " + br").remove();
$("#td4_" + item + " + br").remove();
$("#td5_" + item + " + br").remove();
$("#td6_" + item + " + br").remove();
//刪除span
$("#td1_" + item).remove();
$("#td2_" + item).remove();
$("#td3_" + item).remove();
$("#td4_" + item).remove();
$("#td5_" + item).remove();
$("#td6_" + item).remove();
} else {
alert ('只剩一筆,不可刪除!');
}
}
function insert_data_1() { //page_load後插入DropDownList
var get_str1= $("#TextBox1").attr("value");
rtn_array = split_str(get_str1);
var insert_html = "<select id='DDL_1' name='DDL_1'>";
for (i = 0; i < rtn_array.length; i++)
{
insert_html += "<option value='" + rtn_array[i] + "'>" + rtn_array[i] + "</option>";
}
insert_html += "</select>";
$("#DropDownListDiv2 > span:last").append(insert_html);
}
function insert_data_2() { //組合option字串供按鈕新增使用
var get_str1= $("#TextBox1").attr("value");
rtn_array = split_str(get_str1);
var insert_html = "";
for (i = 0; i < rtn_array.length; i++)
{
insert_html += "<option value='" + rtn_array[i] + "'>" + rtn_array[i] + "</option>";
}
return insert_html;
}
function split_str(str1) { //將字串分割並回傳陣列
rtn_array = str1.split("|");
return rtn_array;
}
</script>
</head>
<body onload="insert_data_1();">
<form id="form1" runat="server">
<table border="0">
<tr><td></td>
<tr><td>
<table border="1">
<tr><td>姓名</td>
<td>公司電話</td>
<td>性別</td>
<td>是否吃素?</td>
<td>位置</td>
<tr><td>
<div id="TextBoxDiv1">
<span style="display: inline-block;height: 24px;" id="td1_1"><input type="text" id="TextBox_Username1" name="TextBox_Username1" value="this is Username1" /></span><br />
</div>
<td>
<div id="TextBoxDiv2">
<span style="display: inline-block;height: 24px;" id="td2_1"><input type="text" id="TextBox_Tel1" name="TextBox_Tel1" value="this is TextBox_Tel1" /></span><br />
</div>
<td>
<div id="DropDownListDiv1">
<span style="display: inline-block;height: 24px;" id="td3_1"><select id="DropDownList_1" name="DropDownList_1"><option value="男">男</option><option value="女">女</option></select></span><br />
</div>
<td>
<div id="RadioButtonDiv1">
<span style="display: inline-block;height: 24px;" id="td4_1"><input type="radio" id="RadioButton_1" name="RadioButton_1" value="0"><label id="LabelA_1" name="LabelA_1">葷</label><input type="radio" id="RadioButton_1" name="RadioButton_1" value="1"><label id="LabelB_1" name="LabelB_1">素</label></span><br />
</div>
<td>
<div id="DropDownListDiv2">
<span style="display: inline-block;height: 24px;" id="td6_1"></span><br />
</div>
<td>
<div id="ButtonDiv1">
<span style="display: inline-block;height: 24px;" id="td5_1"><input type="button" value="Delete" id="deleteButton1" name="deleteButton1" onclick="delete_item(1)"></span><br />
</div>
</table>
</td>
</table>
<div id="ContentDiv">
<input type="button" id="button1" value="增加一筆" />
<input type="hidden" id="Count" name="Count" value="2" />
<input type="hidden" id="Count_now_records" name="Count_now_records"" value="1" />
<asp:Button ID="Button1" runat="server" Text="儲存" OnClick="Button1_Click"/>
<div id="ShowValueDiv">
<asp:Label runat="server" ID="Label1"></asp:Label>
<br>--------<br>
<asp:Label runat="server" ID="Label2"></asp:Label>
<br>--------<br>
<asp:Label runat="server" ID="Label3"></asp:Label>
<br>--------<br>
<asp:Label runat="server" ID="Label4"></asp:Label>
<br>--------<br>
<asp:Label runat="server" ID="Label5"></asp:Label>
</div>
</div>
<asp:TextBox ID="TextBox1" runat="server" Text="" Visible="True"></asp:TextBox>
<asp:Label ID="Label99" runat="server" Text=""></asp:Label>
</form>
</body>
</html>
test1.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
public partial class test1: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
TextBox1.Text = "一樓|二樓|三樓"; //此處可寫成從資料庫取值，組合各值，以「|」隔開，置於TextBox1即可被轉成DropDownList使用
}
TextBox1.Style.Add("visibility", "hidden"); //將TextBox1隱藏
}
protected void Button1_Click(object sender, EventArgs e) //儲存
{
//取出TextBox_Username
int count = 1;
Label1.Text = "";
Int32.TryParse(Request.Form["Count"], out count);
StringBuilder sb1 = new StringBuilder();
count = count - 1;
sb1.Append("There are " + count + " TextBox<br/>");
for (int i = 1; i <= count; i++)
{
string name1 = "TextBox_Username" + i;
string value1 = Request.Form[name1];
sb1.AppendFormat("name:{0} value:{1}<br/>", name1, value1);
}
Label1.Text = sb1.ToString();
//取出TextBox_Tel
count = 1;
Label2.Text = "";
Int32.TryParse(Request.Form["Count"], out count);
StringBuilder sb2 = new StringBuilder();
count = count - 1;
sb2.Append("There are " + count + " TextBox<br/>");
for (int i = 1; i <= count; i++)
{
string name2 = "TextBox_Tel" + i;
string value2 = Request.Form[name2];
sb2.AppendFormat("name:{0} value:{1}<br/>", name2, value2);
}
Label2.Text = sb2.ToString();
//取出DropDownList
count = 1;
Label3.Text = "";
Int32.TryParse(Request.Form["Count"], out count);
StringBuilder sb3 = new StringBuilder();
count = count - 1;
sb3.Append("There are " + count + " DropDownList<br/>");
for (int i = 1; i <= count; i++)
{
string name3 = "DropDownList_" + i;
string value3 = Request.Form[name3];
sb3.AppendFormat("name:{0} value:{1}<br/>", name3, value3);
}
Label3.Text = sb3.ToString();
//取出RadioButton
count = 1;
Label4.Text = "";
Int32.TryParse(Request.Form["Count"], out count);
StringBuilder sb4 = new StringBuilder();
count = count - 1;
sb4.Append("There are " + count + " RadioButton<br/>");
for (int i = 1; i <= count; i++)
{
string name4 = "RadioButton_" + i;
string value4 = Request.Form[name4];
sb4.AppendFormat("name:{0} value:{1}<br/>", name4, value4);
}
Label4.Text = sb4.ToString();
//取出DropDownList
count = 1;
Label5.Text = "";
Int32.TryParse(Request.Form["Count"], out count);
StringBuilder sb5 = new StringBuilder();
count = count - 1;
sb5.Append("There are " + count + " DropDownList<br/>");
for (int i = 1; i <= count; i++)
{
string name5 = "DDL_" + i;
string value5 = Request.Form[name5];
sb5.AppendFormat("name:{0} value:{1}<br/>", name5, value5);
}
Label5.Text = sb5.ToString();
}
}
留言列表
