如何才能用js将一个GridView显示的一个列屏蔽掉
想手动在页面取消和显示一个列，这个列是GridView的模板列，要怎么样处理才可以呢，谢谢
[解决办法]
设置 td 的 display 为none 可以么？
[解决办法]
GridView.columns[i].visable=false;
[解决办法]
哇！一个列啊！行比较好办，列的话……
遍历每一行( <tr> )，将相应的cell（ <td> ）style 的display设为none.
[解决办法]
可以,最好你先写代码,如果不可以再修改
[解决办法]
function Show(){
var table = document.getElementById( "table ");
var trs = table.getElementsByTagName( "tr ");
for(var i = 0;i <trs.length;i++){
var tds = trs.getElementsByTagName( "td ");
for(var j = 0 ;j <tds.length;j++){
if(j = 你要删除的列){
trs.removeChilds(tds[i]);
}
}
}
}
[解决办法]
或者
tds[i].style.display = 'none ';
[解决办法]
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> 列
<!-- 这里请根据变通需要调用函数 showGridViewColumn( 'GridView1 ', document.getElementById( 'sltColumns ').value, true) -->
<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 这些对象吗？
[解决办法]
if(dt.Columns[i].ColumnName== "AA ")
{
e.Item.Cells[i].Style.Add( "display ", "none ");
}
[解决办法]
document.getElementById( "GridView1 ").rows[i].cells[2].style.display = "none ";
[解决办法]
前台隐藏
document.getElementById( "GridView1 ").rows[2].style.display = "none ";
后台隐藏
GridView.Columns[2].Visable=false;
