如何才能用js将一个GridView显示的一个列屏蔽掉

设置 td 的 display 为none 可以么？

哇！一个列啊！行比较好办，列的话……
遍历每一行(<tr>)，将相应的cell（<td>）style 的display设为none.

或者tds[i].style.display = 'none';

wuxing2006(金宝) ：
你这个思路我想过
但无论tr还是td都没有id或Name哦,具体GridView生成的代码如下，我想在打印时屏蔽最后一列否决原因
<tr class="GridHeaderStyle" style="border-width:1px;border-style:solid;font-weight:bold;">
<th scope="col" style="border-color:Black;border-width:1px;border-style:Solid;">序号</th><th scope="col">产品ID</th>
<th scope="col">产品名称</th>
<th scope="col">否决原因</th>
</tr>
<tr align="center" style="background-color:#EFF3FB;">
<td align="center" style="border-color:Black;border-width:1px;border-style:Solid;">
1 </td>
<td>1441</td>
<td>胶囊</td>
<td><input name="GridView1$ctl02$txtRejectReason" type="text" maxlength="100" id="GridView1_ctl02_txtRejectReason" /></td>
</tr>

1。
wuxing2006(金宝) ：
你这个思路我想过
－－－－－－－－－－－－－－－
其实 wuxing2006(金宝)  已经给我们很大到的提示了， 2。
这里我实现了一个 Demo，同时实现了隐藏列和行<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %><%--http://community.csdn.net/Expert/TopicView3.asp?id=5582620--%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            LoadProductData();
        }
    }
       void LoadProductData()
    {
        DataTable dt = CreateProductTable();

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }    #region sample data    static DataTable CreateProductTable()
    {
        DataTable tbl = new DataTable("Products");        tbl.Columns.Add("ProductID", typeof(int));
        tbl.Columns.Add("ProductName", typeof(string));
        tbl.Columns.Add("CategoryID", typeof(int));
        DataRow row = tbl.NewRow();
        row[0] = 1;
        row[1] = "Chai";
        row[2] = 1;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 2;
        row[1] = "Chang";
        row[2] = 1;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 3;
        row[1] = "Aniseed Syrup";
        row[2] = 2;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 4;
        row[1] = "Chef Anton's Cajun Seasoning";
        row[2] = 2;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 5;
        row[1] = "Chef Anton's Gumbo Mix";
        row[2] = 2;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 47;
        row[1] = "Zaanse koeken";
        row[2] = 3;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 48;
        row[1] = "Chocolade";
        row[2] = 3;
        tbl.Rows.Add(row);        row = tbl.NewRow();
        row[0] = 49;
        row[1] = "Maxilaku";
        row[2] = 3;
        tbl.Rows.Add(row);        return tbl;
    }    #endregion</script><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function showGridViewColumn(grdId, colIndex, show)
    {
        //debugger;
        colIndex = (colIndex == null) ? 0 : parseInt(colIndex);
        show = (show == null) ? false : new Boolean(show).valueOf();

        // 得到 GridView 呈现的 table
        var grdTbl = document.getElementById(grdId);
        if(!grdTbl) return alert("指定的 GridView 不存在。");

        // 得到 table 中的所有 tr
        var trArr = grdTbl.getElementsByTagName("tr");
        for(var i = 0; i < trArr.length; i++) {
            // 得到每行中的所有 td
            var tdArr = trArr[i].getElementsByTagName("td");
            // 尝试 th 表头
            if(tdArr.length == 0) tdArr = trArr[i].getElementsByTagName("th");
            // 防止越界，只判断一次，这里假设不存在合并单元格
            if(i == 0 && colIndex >= tdArr.length) break;
            // 显示或者隐藏
            tdArr[colIndex].style.display = show ? "" : "none";
        }
    }

    function showGridViewRow(grdId, rowIndex, show)
    {
        rowIndex = (rowIndex == null) ? 0 : parseInt(rowIndex);
        show = (show == null) ? false : new Boolean(show).valueOf();

        // 得到 GridView 呈现的 table
        var grdTbl = document.getElementById(grdId);
        if(!grdTbl) return alert("指定的 GridView 不存在。");

        // 得到 table 中的所有 tr
        var trArr = grdTbl.getElementsByTagName("tr");
        // 防止越界，只判断一次，这里假设不存在合并单元格
        if(rowIndex >= trArr.length) return;
        // 显示或者隐藏
        trArr[rowIndex].style.display = show ? "" : "none";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        选择第<select id="sltColumns">
            <option value="0">1</option>
            <option value="1">2</option>
            <option value="2">3</option>
        </select>列
        
        <input type="button" onclick="showGridViewColumn('GridView1', document.getElementById('sltColumns').value, true)" value="show" />
        <input type="button" onclick="showGridViewColumn('GridView1', document.getElementById('sltColumns').value, false)" value="hide" />
        <br />
        选择第<select id="sltRows">
            <option value="0">1</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>行
        <input type="button" onclick="showGridViewRow('GridView1', document.getElementById('sltRows').value, true)" value="show" />
        <input type="button" onclick="showGridViewRow('GridView1', document.getElementById('sltRows').value, false)" value="hide" />
        <asp:GridView ID="GridView1" runat="server" >
        </asp:GridView>
    </div>
    </form>
</body>
</html>Hope helpful！

//隐藏第三行
document.getElementById("GridView1").rows[2].style.display = "none";//隐藏第三列
for(var i = 0; i < document.getElementById("GridView1").rows.length; i ++)
document.getElementById("GridView1").rows[i].cells[2].style.display = "none";

@amandag(高歌)FF 里面可以直接使用 table rows cells 这些对象吗？

To Jinglecat(晓风残月):可以的取集合元素时, ie支持 [],() 2种写法, 但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0]

@amandag(高歌)好的，回头装个FF测试恭喜啊，什么时候又顶了颗闪耀红星啦~

if(dt.Columns[i].ColumnName=="AA")
{
e.Item.Cells[i].Style.Add("display","none");
}

document.getElementById("GridView1").rows[i].cells[2].style.display = "none";

可能很简单因为任何数据控件都是<table><tr><td></td></tr><table>
包括像treeview这样的控件

前台隐藏
document.getElementById("GridView1").rows[2].style.display = "none";后台隐藏
GridView.Columns[2].Visable=false;

前台隐藏
document.getElementById("GridView1").rows[2].style.display = "none";后台隐藏
GridView.Columns[2].Visable=false;
这样可以？

//隐藏GRIDVIEW的第一列，通常第一列为主键ID列
        if (e.Row.RowType == DataControlRowType.DataRow || e.Row.RowType == DataControlRowType.Header)
        {
            e.Row.Cells[0].Visible = false;//如果想使第1列不可见,则将它的可见性设为false 并且判断分页，使分页不会丢失
        }我只是隐藏了第一列，隐藏其他列的我还没遇到过，寒一下～～～～

调试易

如何才能用js将一个GridView显示的一个列屏蔽掉

解决方案 »