Question

我有以下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>

由于

Answer 1

.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;属性似乎是。第一个是第一个“第一列”。消失。

匹配具有给定属性的元素

1 个答案: