求助！根據下拉框中的數值動態生成對應行數的表格
剛剛學習.net不久，今天要求做一個產品界面的模板，行數在2，3,4 行，每行兩種產品，每個產品單元格中要求既能輸入文本，圖片，也可以二者都輸入。根據行數和每個單元格內容屬性的不同生成不同的產品類別模板，供后台管理員使用。我是這樣考慮的，用一個下拉框DropDownList,里面分別有2,3,4 三個選項，然后當我選擇“2”的時候，自動就在同一個頁面里生成一個兩行兩列的表格，然后在每個單元格里在有三個選項：圖片、文字、圖片和文字。
大體上就是這樣，我想用AJAX做，這樣就不用點擊提交了，AJAX也是剛剛學習的階段，很多東西也不太明白，照貓畫虎的搞了一些代碼，但是無法執行，還請各位前輩指教，小弟不勝感激！
主要就是想明確，AJAX中那個下拉列表的值如何返回到當前頁面，然后再被程序使用，動態生成這樣一個行數變化的表格。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Module_Add.aspx.cs" Inherits="Module_Add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
類似的功能用js就可以解決
老兄的代碼很簡練，非常好。但是有兩個問題，首先，這樣寫的話，那些個元素的CSS屬性應該如何設置？還請賜教。其次，如何將動態表單項里的值提交到數據庫中？這些表單項對應的是數據庫中的一條記錄，比如說第一行的1,2兩個單元格對應的是字段a1,a2, 第二行則對應a3,a4,以此類推。還請前輩賜教！
大體上就是這樣，我想用AJAX做，這樣就不用點擊提交了，AJAX也是剛剛學習的階段，很多東西也不太明白，照貓畫虎的搞了一些代碼，但是無法執行，還請各位前輩指教，小弟不勝感激！
主要就是想明確，AJAX中那個下拉列表的值如何返回到當前頁面，然后再被程序使用，動態生成這樣一個行數變化的表格。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Module_Add.aspx.cs" Inherits="Module_Add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>制作模板，第一步</title>
</head>
<script language="javascript">
function ajaxFunction()
{
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{
xmlHttp=new ActiveXObject(Msxml2.XMLHTTP);
}
catch(e){
try{
xmlHttp=new ActiveXObject(Msxml.XMLHTTP);
}
catch(e){
alert('您的瀏覽器不支持AJAX！');
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.Readystate==4)
{
var dd1=document.getElementById("DropDownList1");
var index=dd1.selectIndex;
var aaa=dd1.options[index].value;
alert("aaa"); //這里無法執行
}
}
xmlHttp.open("GET","",true);
//xmlHttp.send(Null);
}
</script>
<body>
<form name="form1" method="post" action="" runat="server">
<table width="80%" align="center" style="border:solid 1px #4397c5; padding:0;">
<tr style="border:solid 1px #4397c5">
<td height="27" colspan="4">新增產品頁面模板</td>
</tr>
<tr style="margin:0px;">
<td style="width: 107px; border:solid 1px #4397c5; margin:-2px; height: 25px;">模板名稱</td>
<td style="width: 237px; height: 25px;"><input type="text" name="tf_module_name" value="產品模板"></td>
<td style="width: 115px; height: 25px;">模板行數</td>
<td width="27%" style="height: 25px">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<div id="rownum">
</div>
</table>
<table>
里面動態生成模板的行數
</table>
</form>
</body>
</html>
11 个解决方案
#1
var dd1=document.getElementById("DropDownList1");
var index=dd1.selectedIndex;
alert(index);
var aaa=dd1.options[index].value;
alert('a');
你下標單詞寫錯了朋友。是應該是selectedIndex;
而不是selectIndex;
var index=dd1.selectedIndex;
alert(index);
var aaa=dd1.options[index].value;
alert('a');
你下標單詞寫錯了朋友。是應該是selectedIndex;
而不是selectIndex;
#2
貌似修改后也是不行，這個用AJAX的JS代碼並不執行，要實現我上面所說的功能不復雜的，還請各位前輩高手指教！
#3
學習！！！！！！！11
#4
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dynamicAdd.aspx.cs" Inherits="WebApp.dynamicAdd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function addFile() {
var _table = document.createElement("table");
var _tbody = document.createElement("TBODY");
var _row;
var _cell;
var rlen = parseInt(document.getElementById("rowlen").value);
for (var i = 0; i < rlen; i++) {
_row = document.createElement("tr");
for (var j = 0; j < 3; j++) {
_cell = document.createElement("td");
var div = document.createElement("div");
var f = document.createElement("input");
f.setAttribute("type", "text")
f.setAttribute("name", "txtCardNo")
f.setAttribute("size", "20")
div.appendChild(f)
var d = document.createElement("input");
d.setAttribute("type", "button")
d.setAttribute("onclick", "deteFile(this)");
d.setAttribute("value", "移除")
div.appendChild(d)
_cell.appendChild(div);
_row.appendChild(_cell);
}
_tbody.appendChild(_row);
}
_table.appendChild(_tbody);
var con = document.getElementById("_container");
con.innerHTML = "";
con.appendChild(_table);
}
function deteFile(o) {
while (o.tagName != "DIV") o = o.parentNode;
o.parentNode.removeChild(o);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<select id="rowlen">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input value="add" type="button" onclick="addFile()" />
<div id="_container">
</div>
<input type="submit" value="ok" />
</form>
</body>
</html>
類似的功能用js就可以解決
#5
用ajax實現思想，先新建一個新的Data.aspx用於被ajax請求頁面,可以該頁面后台寫代碼，根據判斷下拉框
參數返回相應內容。
document.getElementById("rownum").innerHTML = returnHtml; 表示取網頁ID叫rownum賦ajax返回的值
按你的需求，需要在DropDownList1f的后台添加onChange屬性調用js的change()方法就實現了。
DropDownList1.Attributes.Add("onChange","change()");
參數返回相應內容。
<script language="javascript">
var xmlHttp = false;
function CreateXMLHttpRequest(){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function StartRequest(RequestUrl,HandleFunctionName){
CreateXMLHttpRequest();
xmlHttp.open("GET",RequestUrl,false);
xmlHttp.setRequestHeader("Content-Type", "text/xml");
xmlHttp.setRequestHeader("charset", "utf-8");
xmlHttp.onreadystatechange = HandleFunctionName;
xmlHttp.send(null);
}
function GetData() {
var listType = document.all.DropDownList1.options[document.all.DropDownList1.selectedIndex].value;
var Url = "Data.aspx?Type=" + listType;
StartRequest(Url, HandleReload);
}
function change() {
GetData();
}
function HandleReload() {
try {
if (xmlHttp.readyState == 4) {
var returnHtml = xmlHttp.responseText;
document.getElementById("rownum").innerHTML = returnHtml;
}
}
catch(e) {
window.alert(e);
}
}
</script>
document.getElementById("rownum").innerHTML = returnHtml; 表示取網頁ID叫rownum賦ajax返回的值
按你的需求，需要在DropDownList1f的后台添加onChange屬性調用js的change()方法就實現了。
DropDownList1.Attributes.Add("onChange","change()");
#6
樓上的戰友，看不太明白，還請指教
#7
老兄的代碼很簡練，非常好。但是有兩個問題，首先，這樣寫的話，那些個元素的CSS屬性應該如何設置？還請賜教。其次，如何將動態表單項里的值提交到數據庫中？這些表單項對應的是數據庫中的一條記錄，比如說第一行的1,2兩個單元格對應的是字段a1,a2, 第二行則對應a3,a4,以此類推。還請前輩賜教！
#8
#9
CSS屬性的話簡單呢！你先定義好類名，在調用JS的時候調用CSS的class類名，寫到頁頭可以，也可以寫到CSS文件中；
至於如何輸出呢，你可以使用jq.ajax的異步回調功能，將數據傳輸到一個一般處理程序中，對數據庫操作在此完成。
至於如何輸出呢，你可以使用jq.ajax的異步回調功能，將數據傳輸到一個一般處理程序中，對數據庫操作在此完成。
#10
那如果我的同一個標簽采用不同的CSS，就不行了吧。還有，如何通過AJAX將Javascript中生成的控件的值輸入數據庫？還請多多指教，謝謝！
#11
沒人回復啊
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。