如何动态的生成一个表格中的表格单元（<td></td>)？

How to Build Tables Dynamically
http://msdn.microsoft.com/workshop/author/tables/buildtables.asp

解决方案 »

  1.   

    <%@ Language=VBScript %>
    <%
    '************************************************************************************************************
    '
    ' 单一文件版本Select下拉联动的数据库版本的实现
    '
    '
    '************************************************************************************************************%>
    <html>
    <title>联动下拉列表事例</title>
    <body>
    <script language = "JavaScript">
    <!--
    //第一个select的onchange事件函数function RefreshSelect(o,n)
    { if(n==2) document.mxh.elements["s"+(n+1)].innerHTML=""
    if(o.options[o.selectedIndex].value=="0")
    document.mxh.elements["s"+n].innerHTML=""
    else
    {
    document.mxh.btn.disabled = false
    window.frames['hiddenFrame'].location.href = 'MultiSelect.asp?pid=' + o.options[o.selectedIndex].value+"&n="+n
    }
    }function getSelected()
    {
    for(i=1;i<4;i++)
    {
    if(document.mxh.elements["s"+i].selectedIndex >-1)
    alert("您选择了:" + document.mxh.elements["s"+i].options[document.mxh.elements["s"+i].selectedIndex].value + " - " + document.mxh.elements["s"+i].options[document.mxh.elements["s"+i].selectedIndex].text)
    }
    }
    //-->
    </script>
    <form name=mxh>
    <input value="页面的其它内容不会改变。"><br>
    <select name="s1" onchange = "RefreshSelect(this,2)"><option value="0">--请选择--</select>
    <select name="s2" onchange = "RefreshSelect(this,3)"><option value="0">--请选择--</select>
    <select name="s3"></select>
    <input type="button" name='btn' disabled = true value = "查看选择" onclick="getSelected()">
    </form>
    <iframe name="hiddenFrame" style="display:none"></iframe>
    </body>
    <%'本程序分2部分，一个用来进行提交生成新数据的，一个用来初始化的，
    '其实，这样对于理解并不是很有利，暂且这样实现，希望您能看的明白哦，放在两个文件里比较好理解啊'1,初始化部分开始，主要工作：
    'a,初始化第一个下拉列表 Dim sql,rs,cn,i
    i = 0
    Set cn = Server.CreateObject("ADODB.Connection")
    cn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("MultiSelect.mdb")
    If Request.QueryString("pid") = "" Then
    '初始化部分
    Set rs = cn.Execute("SELECT * FROM Area Where pid=0")
    Response.Write "<script language = 'JavaScript'>" & vbCrLf
    Response.Write "var arr1 = new Array()" & vbCrLf
    Response.Write "var arr2 = new Array()" & vbCrLf While Not rs.EOF
    Response.Write "arr1[" & i & "] = '" & rs("id") & "'" & vbCrLf
    Response.Write "arr2[" & i & "] = '" & rs("Name") & "'" & vbCrLf
    i = i +1
    rs.MoveNext
    Wend
    '为安全起见
    Response.Write "window.onload = new function() {" & vbCrLf
    Response.Write "select1 = document.mxh.s1" & vbCrLf
    Response.Write "for(i = 1;i<arr1.length + 1;i++)" & vbCrLf
    Response.Write "select1.options[i] = new Option(arr2[i-1],arr1[i-1])" & vbCrLf
    Response.Write "}" & vbCrLf
    Response.Write "</script>" & vbCrLf
    Else
    '处理数据的提交
    strTreeId = Request.QueryString("pid")
    If strTreeId = "" Then strTreeId = 0
    If IsNumeric(strTreeId) = False Then strTreeId = 0  
    Response.Clear
    Response.Write "<script language = 'JavaScript'>" & vbCrLf
    Response.Write "select" & Request.QueryString("n") & " = window.parent.document.mxh.s" & Request.QueryString("n") & vbCrLf
    Response.Write "select" & Request.QueryString("n") & ".innerHTML = ''" & vbCrLf
    Response.Write "select" & Request.QueryString("n") & ".options[0] = new Option(""--请选择--"",""0"")" & vbCrLf
    Set rs = cn.Execute("SELECT * FROM Area Where pid = " & Request.QueryString("pid"))
    While Not rs.EOF
    Response.Write "select" & Request.QueryString("n") & ".options[select" & Request.QueryString("n") & ".length] = new Option('" & Trim(rs("Name")) & "','" & rs("id") & "')" & vbCrLf
    rs.MoveNext
    Wend
    Response.Write "</script>" & vbCrLf
    End If
    rs.Close
    Set rs = Nothing
    cn.Close
    Set cn = Nothing
    %>
      

  2.   

    添加一列用:row.innsertCell();三级联动我写过一个,不过没有输入功能的.
    <html>
    <head>
    <script language=javascript>
    var arr="浙江|江苏|安徽|江西";var arr0 = "杭州|宁波|温州|绍兴"; //这些数据可以从数据库中取得
    var arr1 = "南京|苏州|无锡|常州";
    var arr2 = "合肥|翕县|黄山|祁门";
    var arr3 = "南昌|九江|赣州|上饶"; var arr00 = "杭州A区|杭州B区"; 
    var arr01 = "宁波A区|宁波B区"; 
    var arr02 = "温州A区|温州B区"; 
    var arr03 = "绍兴A区|绍兴B区"; var arr10 = "南京A区|南京B区"; 
    var arr11 = "苏州A区|苏州B区"; 
    var arr12 = "无锡A区|无锡B区"; 
    var arr13 = "常州A区|常州B区"; var arr20 = "合肥A区|合肥B区"; 
    var arr21 = "翕县A区|翕县B区"; 
    var arr22 = "黄山A区|黄山B区"; 
    var arr23 = "祁门A区|祁门B区"; var arr30 = "南昌A区|南昌B区"; 
    var arr31 = "九江A区|九江B区"; 
    var arr32 = "赣州A区|赣州B区"; 
    var arr33 = "上饶A区|上饶B区"; //alert(eval("arr"+2+1));
    function AddOptions(dltObj,arrObj)
    {
    dltObj.innerHTML="";
    var arrLocation=arrObj.split("|");
    for(var i=0;i<arrLocation.length;i++){
    var opt=document.createElement("OPTION");
    dltObj.add(opt);
    opt.value=i;
    opt.text=arrLocation[i];
    }
    }
    function ShowValue(){
    var dltAr=document.getElementById("dltArea");
    var hidId=document.getElementById("OutValue");
    var txtText=document.getElementById("txtOutText");
    hidId.value=dltAr.options[dltAr.selectedIndex].value;
    txtText.value=dltAr.options[dltAr.selectedIndex].text;}
    function init(){
    AddOptions(dltProvince,eval('arr'));
    AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));
    AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));
    ShowValue();
    }
    </script>
    </head>
    <body onLoad="init();">
    <table width="300" cellpading="0" cellspacing="0" border="2">
    <tr>
    <td width="100"><select id="dltProvince" onchange="AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));ShowValue();" style="width:100%"></select>
    </td>
    <td width="100"><select id="dltCity" onchange="AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));ShowValue();" style="width:100%"></select>
    </td>
    <td width="100"><select id="dltArea" style="width:100%" onchange="ShowValue()"></select></td>
    <td width="100">
    <input type="hidden" id="OutValue" value="">
    <input type="text" id="txtOutText" style="width:100%">
    </td>
    </tr>
    </table>
    </body>
    </html>
    我要把有限的生命投入到无限的为人民回贴事业中去!谁会申请域名?帮我申请一个,最好是www.meixx.com/net/org,不要二级和三级的!
    还有好的免费空间,谁知道?帮忙啊!
      

  3.   

    已经搞定，代码如下：
    -------------------------------------------------------------------------------------
    <html>
    <body>
    <form name="form1">
    <table>
    <tr id="aa">
    <td>
    <select name="cxlb" onchange="addCell();">
    <option value="0">请选择查询类别</option>
    <option value="1">按单位查询</option>
    <option value="2">按资本金查询</option>
    </select>
    </td>
    <td id="newTd">
    </td>
    <td id="newTd2">
    </td></tr>
    </table>
    </form>
    </body>
    <script language="javascript">
     var newTd=document.getElementById("newTd");
     var newTd2=document.getElementById("newTd2");
     function addCell(){
     var v=document.form1.cxlb.options[document.form1.cxlb.selectedIndex].value;
     if(v==0){
     newTd.innerHTML=('<td>&nbsp;</td>');
     newTd2.innerHTML=('<td>&nbsp;</td>');
     } 
     else if(v==1){
     newTd.innerHTML=('<td id="newTd"><input value="--请输入查询条件--" ></td>');
     newTd2.innerHTML=('<td>&nbsp;</td>');
     }
     else if(v==2){
     newTd.innerHTML=('<td> <select name="zbjcx" onchange="redirect();"><option value="0">--查询类型--</option><option '+ 
     ' value="1">按精确值查询</option> <option value="2">按区间查询</option> </select> </td>'); 
     newTd2.innerHTML=('<td>&nbsp;</td>');   
     }
    }function redirect(){
     var v=document.form1.zbjcx.options[document.form1.zbjcx.selectedIndex].value;
     //alert(v);
     if(v==0){
     newTd2.innerHTML=('<td>&nbsp;</td>');
     } 
     else if(v==1){
     newTd2.innerHTML=('<td><input value="--请输入查询条件--" ></td>');
     }
     else if(v==2){
     newTd2.innerHTML=('<td> <select name="zbjqj"><option value="1">50-100</option> '+
     '<option value="2">100-200</option> </select> </td>');   
     }
     
    }
    </script>
    </html>
    -------------------------------------------------------------------------------------
    net_lover(孟子E章) 贴的文章不错。
    dh20156(风之石) 代码让俺看看呗  ：P
    以上代码肯定能运行
    如果有问题，看看是不是innerHTML中的字符串串行了：）