求助!根據下拉框中的數值動態生成對應行數的表格


    剛剛學習.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">


<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;

#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請求頁面,可以該頁面后台寫代碼,根據判斷下拉框
參數返回相應內容。

<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


引用 4 樓 fellowcheng 的回復:
HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dynamicAdd.aspx.cs" Inherits="WebApp.dynamicAdd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w……


老兄的代碼很簡練,非常好。但是有兩個問題,首先,這樣寫的話,那些個元素的CSS屬性應該如何設置?還請賜教。其次,如何將動態表單項里的值提交到數據庫中?這些表單項對應的是數據庫中的一條記錄,比如說第一行的1,2兩個單元格對應的是字段a1,a2, 第二行則對應a3,a4,以此類推。還請前輩賜教!

#8


#9


   CSS屬性的話簡單呢!你先定義好類名,在調用JS的時候調用CSS的class類名,寫到頁頭可以,也可以寫到CSS文件中;
    至於如何輸出呢,你可以使用jq.ajax的異步回調功能,將數據傳輸到一個一般處理程序中,對數據庫操作在此完成。

#10


那如果我的同一個標簽采用不同的CSS,就不行了吧。還有,如何通過AJAX將Javascript中生成的控件的值輸入數據庫?還請多多指教,謝謝!

#11


沒人回復啊

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。