我有以下HTML,我希望添加类HideEdit
以使用CSS隐藏列。
<th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit">
上面的HTML是使用radGrid生成的。我打算在打印期间隐藏页面上的所有编辑列。我为@mediaPrint
配置了我的CSS。我无法使用rgHeader
,因为此类已被radGrid中的所有列使用。
为了达到预期的效果,我必须将HideEdit
类添加到<th>
所有UniqueName="Edit"
个标记中。
我尝试过以下内容:
$("th.rgHeader:contains('UniqueName=\"Edit\"')").addClass('HideEdit');
以下是完整的HTML:
<TR>
<TD>
<DIV id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_ctl42Panel">
<DIV id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_ctl42">
<DIV style="WIDTH: 100%" id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid" class="RadGrid RadGrid_Default">
<TABLE style="WIDTH: 100%; EMPTY-CELLS: show; TABLE-LAYOUT: auto" id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ctl00" class="rgMasterTable" border="0">
<COLGROUP><COL style="WIDTH: 3%" /><COL style="WIDTH: 15%" /><COL style="WIDTH: 15%" /><COL style="WIDTH: 10%" /><COL style="WIDTH: 10%" /><COL style="WIDTH: 15%" /><COL style="WIDTH: 10%" /><COL style="WIDTH: 22%" /></COLGROUP>
<THEAD>
<TR>
<TH style="DISPLAY: none" class="rgHeader" scope="col" UniqueName="Edit">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl00','')">Edit</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Parent_x0020_Program">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl01','')">Parent Program</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Program">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl02','')">Program</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Program_x0020_ID">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl03','')">Program ID</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Group">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl04','')">Group</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Investment_x0020_Envelope">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl05','')">Investment Envelope</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="Function">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl06','')">Function</A>
</TH>
<TH style="TEXT-ALIGN: center" class="rgHeader" scope="col" UniqueName="AKA">
<A title="Click here to sort" href="javascript:__doPostBack('ctl00$ctl22$g_6f2f4cde_9491_4d9a_b866_c338a5db0248$g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid$ctl00$ctl02$ctl01$ctl07','')">AKA</A>
</TH>
</TR>
</THEAD>
<TBODY>
<TR id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ctl00__0" class="rgRow" vAlign="top">
<TD vAlign="top" align="center">
<A onclick="GoToLink(this);return false;" href="/ProjectProfileForm.aspx?LID=228" target="_self"><IMG border="0" alt="Edit" src="/images/edititem.gif" /></A>
</TD>
<TD vAlign="top" align="center">
</TD>
<TD vAlign="top" align="center">
The Big one
</TD>
<TD vAlign="top" align="center">
PRG0001
</TD>
<TD vAlign="top" align="center">
PDN
</TD>
<TD vAlign="top" align="center">
Revenue Growth
</TD>
<TD vAlign="top" align="center">
Engineering
</TD>
<TD vAlign="top" align="center">
the dummy project for testing
</TD>
</TR>
</TBODY>
</TABLE>
<INPUT id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ClientState" type="hidden" name="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ClientState" autocomplete="off" value="" />
</DIV>
</DIV>
</DIV>
<DIV style="DISPLAY: none" id="ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_AjaxLoadingPanel">
<IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" src="/Images/loading6.gif" />test
</DIV>
</TD>
</TR>
由于
答案 0 :(得分:0)
.HideEdit{display:none;}
$('th.rgHeader').addClass('HideEdit');
您可以使用等效选择器在dom或元素中以数字方式查找元素。
$('th:eq(0)').addClass();//this would be the first within the DOM
$('th:eq(1)','table#element').addClass();//this would be the second table header within the table with an id of element.
要隐藏整个列,您必须为每列添加一个类或使用eq()
$('td:eq(5),td:eq(5)','table#element>tr').hide();//this will hide the 6th column within the table with the id element
jQuery选择器也可以赋予属性
$('element[attribute="value"]')
我认为这就是你的意思?
$('th[UniqueName="Edit"]')
不要忘记他们可能不是所有的表头。
$('td[UniqueName="Edit"]')
我喜欢在形式上使用这种方法来获得便利。
$('input[type="text"]').keyup();
反对
$('#username,#password,#other').keyup();
试试这个
$('td:eq(0),th:eq(0)','#ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ctl00>tr').hide();
但可以采用不同的风格。试试这个,因为我有点困惑:p
$('tr:eq(0)','#ctl00_ctl22_g_6f2f4cde_9491_4d9a_b866_c338a5db0248_g_6f2f4cde_9491_4d9a_b866_c338a5db0248Grid_ctl00').hide();
第二个选择器会使第一行消失,其中所有&#39; UniqueName&#39;属性似乎是。第一个是第一个“第一列”。消失。