嵌套datalist问题

Question

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound">
                <ItemTemplate>
                    <table>
                        <tr>
                            <td>
                                <%#Eval("h_sheng_name") %>
                                <asp:Label ID="HiddenField1" runat="server" Text='<%#Eval("h_sheng_id") %>' />
                                <asp:HiddenField ID="HiddenField2" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:DataList ID="a" runat="server">
                                    <ItemTemplate>
                                        <table>
                                            <tr>
                                                <td>
                                                    <%#Eval("h_shi_name") %>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:DataList ID="b" runat="server" Style="display: none;">
                                    <ItemTemplate>
                                        <table>
                                            <tr>
                                                <td>
                                                    <%#Eval("h_shi_name") %>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="b4.jpg" alt="" style="cursor: pointer;" onclick="a();" />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>如上，我想用js方法a（参数1，参数2）来控制datalist-a和datal-b的显示隐藏，可是我不知道该如何将这两个datalist生成的ClientID返回给方法a（）；请高手给点提示啊···小弟急等

Answer 1

var dg = document.getElementById("<%=b.ClientID%>");

Answer 2

var list1 = document.getElementById(" <%=a.ClientID%>");

Answer 3

这个问题我遇到过：
在ItemTemplate里a,和b生成的id都是多个，你可以在上面加个name
<asp:DataList ID="a" runat="server" name="a"> 
<asp:DataList ID="b" runat="server" name="b"> 
这样再客户端会生成这个name,a,b
js就可以这样操作//隐藏a
var aSet = document.getElementsByName("a");
for(var i=0;i<aSet.length;i++)
{
    aSet[i].style.display="none";
}

Answer 4

看看这样是否可以    protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        DataList a;
        DataList b;
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            a = e.Item.FindControl("a") as DataList;
            b = e.Item.FindControl("b") as DataList;
            if (a != null && b!= null)
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script type='text/JavaScript'>function xxx('" + a.ClientID + "','" + b.ClientID + ") {}</script>");
            }
        }
    } 

Answer 5

请问四楼，我该如何判断我要隐藏的是第几个？getElementByName在火狐下应该不支持啊···

Answer 6

兼容IE,FF<table name="a"><tr><td>a</td></tr></table>
<table name="b"><tr><td>b</td></tr></table>
<table name="a"><tr><td>a</td></tr></table>
<table name="b"><tr><td>b</td></tr></table>
<table name="a"><tr><td>a</td></tr></table>
<table name="b"><tr><td>b</td></tr></table>
<table name="a"><tr><td>a</td></tr></table>
<table name="b"><tr><td>b</td></tr></table>
<script>
//hide all a,show all b
var tblSet = document.getElementsByTagName("table");
var aLen = 0;//a index
var bLen = 0;//b index
for(var i=0;i <tblSet.length;i++) 
{ 
    if(tblSet[i].getAttribute("name")=="a")
    {
        if(aLen==1) alert("ready to hide the second named 'a' table ");
        tblSet[i].style.display="none"; 
        aLen++;
        
    }else if(tblSet[i].getAttribute("name")=="b")
    {
        tblSet[i].style.display="block"; 
        bLen++;
    }
} 
</script>

Answer 7

your expected demo -> <%@ Page Language="C#" %><%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    #region sample data    System.Data.DataTable dtProducts;    static System.Data.DataTable CreateSampleCategoryData()
    {
        System.Data.DataTable tbl = new System.Data.DataTable("Categories");        tbl.Columns.Add("CategoryID", typeof(int));
        tbl.Columns.Add("CategoryName", typeof(string));        tbl.Rows.Add(1, "Cat1");
        tbl.Rows.Add(2, "Cat2");
        tbl.Rows.Add(3, "Cat3");        return tbl;
    }    static System.Data.DataTable CreateSampleProductData()
    {
        System.Data.DataTable tbl = new System.Data.DataTable("Products");        tbl.Columns.Add("ProductID", typeof(int));
        tbl.Columns.Add("ProductName", typeof(string));
        tbl.Columns.Add("UnitPrice", typeof(decimal));
        tbl.Columns.Add("CategoryID", typeof(int));
        tbl.Columns.Add("Stocked", typeof(bool));        tbl.Rows.Add(1, "Chai", 18, 1);
        tbl.Rows.Add(2, "Chang", 19, 1);
        tbl.Rows.Add(3, "Aniseed Syrup", 10, 2);
        tbl.Rows.Add(4, "Chef Anton's Cajun Seasoning", 22, 2);
        tbl.Rows.Add(5, "Chef Anton's Gumbo Mix", 21.35, 2);
        tbl.Rows.Add(47, "Zaanse koeken", 9.5, 3);
        tbl.Rows.Add(48, "Chocolade", 12.75, 3);
        tbl.Rows.Add(49, "Maxilaku", 20, 3);        return tbl;
    }    #endregion    private void BindProducts()
    {
        dtProducts = CreateSampleProductData();
        DataList1.DataSource = CreateSampleCategoryData();
        DataList1.DataBind();
    }    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindProducts();
            
             
        }
    }</script><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        http://topic.csdn.net/u/20090218/18/e93965a6-7b14-4880-81a0-22490889200d.html
        
        <asp:DataList ID="DataList1" runat="server">
            <ItemTemplate>
                <table border="1">
                    <tr>
                        <td>
                            <%# Eval("CategoryName") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:DataList ID="DataList11" runat="server" DataSource='<%# new DataView(dtProducts, "CategoryID=" +  Eval("CategoryID"), null, DataViewRowState.CurrentRows) %>'>
                                <ItemTemplate>
                                    <table border="1">
                                        <tr>
                                            <td>
                                                <%# Eval("ProductName") %>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:DataList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnToggoleProducts" runat="server" Text="Show/Hide Products" OnClientClick="btnToggleProducts_Click(this);return false;" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>        <script type="text/javascript">
            function btnToggleProducts_Click(sender) {
                var tblProducts;
                tblProducts = sender.parentNode.parentNode.previousSibling.firstChild;
                // or
                // tblProducts = document.getElementById(sender.id.replace("btnToggoleProducts", "DataList11"));
                tblProducts.style.display = tblProducts.style.display == '' ? "none" : "";
            }
           
        </script>    </div>
    </form>
</body>
</html>

Answer 8

可以这样，假定Datalist输出后的是<table>。
1、首先取到最外面的datalist。
var mainTable = document.getelmentbyid("×.clinentID")
2.取mainTable下的所有<table>元素
var tables = mainTable.getElementsByTagName('table');//getElementsByTagName 方法FF支持
3.判断tables数组里取到的table是否是你内嵌的Datalist控件输出的，采用ID匹配的方法(你可以给内置的datalist取个长点的Id)
if(tables[i].id.indexOf('a',0) >= 0) > -1)通过以上方法就能找到输出后的Datalist，其它应用就好办了。

Answer 9

如果你准备直接影藏父DataList的 td 那么用<script type="text/javascript">
            function btnToggleProducts_Click(sender) {
                var tblProducts;
                // tblProducts = sender.parentNode.parentNode.previousSibling.firstChild; // IE
                // or
                tblProducts = document.getElementById(sender.id.replace("btnToggleProducts", "DataList11")); // IE, FF#\n
                //tblProducts.style.display = tblProducts.style.display == '' ? "none" : "";
                var tdProducts = tblProducts.parentNode.parentNode;
                tdProducts.style.display = tdProducts.style.display == '' ? "none" : "";
            }           
        </script>