blocks|key|1345871|text|不需要管理您自己的变量(无论是递增计数器还是布尔值)；您可以查看内置的ItemIndex属性是否可以被2整除，并使用它来设置一个css类：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1345872|class="<%25#+Container.ItemIndex+%25+2+==+0+?+""+:+"alternate"+%25>"|code-block|syntax|javascript|1345873|这样做的好处是完全基于您的UI代码(ascx或aspx文件)，而不依赖于JavaScript。|1345874|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeateritem.itemindex.aspx^0|Z|9|Z|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

There is no need to manage your own variable (either an incrementing counter or a boolean); you can see if the built-in <a href="http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeateritem.itemindex.aspx" rel="noreferrer"><code>ItemIndex</code></a> property is divisible by two, and use that to set a css class:

<pre><code>class="&lt;%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %&gt;"
</code></pre>

This has the benefit of being completely based in your UI code (ascx or aspx file), and doesn't rely on JavaScript.

blocks|key|1345921|text|IsAlternatingRow可以是受保护的属性，并将在ItemDataBound或ItemCreated事件中设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1345922|protected+void+rpt_ItemDataBound(object+sender,+EventArgs+e)
{
++++IsAlternatingRow+=+!IsAlternatingRow;
}|code-block|syntax|javascript|1345923|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

IsAlternatingRow can be a protected property and will get set in the ItemDataBound or ItemCreated event.

<pre><code>protected void rpt_ItemDataBound(object sender, EventArgs e)
{
 IsAlternatingRow = !IsAlternatingRow;
}
</code></pre>

blocks|key|1561572|text|使用JQuery应用这些类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561573|$('.divtable+>+div:odd').addClass('dark');
$('.divtable+>+div:even').addClass('light');|code-block|syntax|javascript|1561574|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Apply the classes with JQuery.

<pre><code>$('.divtable &gt; div:odd').addClass('dark');
$('.divtable &gt; div:even').addClass('light');
</code></pre>

blocks|key|1346002|text|您可以改用jQuery。对上一个问题的回答可能会有所帮助：jQuery+Zebra+selector|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1346003|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/287489/jquery-zebra-selector^0|T|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You could use jQuery instead. This answer to a previous question may help: <a href="https://stackoverflow.com/questions/287489/jquery-zebra-selector">jQuery Zebra selector</a>

blocks|key|1346028|text|C#|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346029|class="<%25#+Container.ItemIndex+%25+2+==+0+?+""+:+"alternate"+%25>"|code-block|syntax|javascript|1346030|VB|1346031|class="<%25#+iif(Container.ItemIndex+Mod+2+=+0,"","alternate")+%25>"|1346032|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

C#

<pre><code>class="&lt;%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %&gt;"
</code></pre>

VB

<pre><code>class="&lt;%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %&gt;"
</code></pre>

blocks|key|1561720|text|小调整:可以使用如下命令删除空类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561721|++<%25#+Container.ItemIndex+%25+2+==+0+?++"<tr>"+:+"<tr+class='odd'>"++%25>|code-block|syntax|javascript|1561722|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Little tweak: the empty class could be removed with something like:

<pre><code> &lt;%# Container.ItemIndex % 2 == 0 ? "&lt;tr&gt;" : "&lt;tr class='odd'&gt;" %&gt;
</code></pre>

blocks|key|1561778|text|这对我很有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561779|class='<%25#+Container.ItemIndex+%25+2+==+0+?+""+:+"alternate"+%25>'|code-block|syntax|javascript|1561780|之前的回答导致了“服务器标签格式不正确”的错误。|1561781|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This helped me

<pre><code>class='&lt;%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %&gt;'
</code></pre>

Previous answer resulted in "Server Tag is not well formed" error.

blocks|key|1561824|text|不需要代码。这是一个纯CSS解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561825|.item:nth-child(odd){background-color:+#ccc}
.item:nth-child(){background-color:+#ddd}|code-block|syntax|javascript|1561826|https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child|offset|length|1561827|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1N|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

No need for code. Here's a pure CSS solution:

<pre><code>.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child</a>

I'm trying to accomplish simply adding a css class to a div on alternate rows in my <code>&lt;itemtemplate/&gt;</code> without going to the overhead of including a full blown <code>&lt;alternatingitemtemplate/&gt;</code> which will force me to keep a lot of markup in sync in the future.

I've seen a solution such as <a href="http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/" rel="noreferrer">http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/</a> which I'm tempted to use but this still doesn't "smell" right to me.

Has anyone else got a more maintainable and straightforward solution? Ideally I'd like to be able to do something like:

<pre><code>&lt;asp:repeater id="repeaterOptions" runat="server"&gt;
 &lt;headertemplate&gt;
 &lt;div class="divtable"&gt;
 &lt;h2&gt;Other Options&lt;/h2&gt;
 &lt;/headertemplate&gt;
 &lt;itemtemplate&gt;
 &lt;div class="item &lt;%# IsAlternatingRow ? "dark" : "light" %&gt;"&gt;
</code></pre>

But I can't figure out how to implement <code>IsAlternatingRow</code> - even with extension methods.

ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>

服务器

jQuery

我正在尝试完成简单的添加css类到我的<itemtemplate/>的交替行的div中，而不是去包括一个完整的<alternatingitemtemplate/>的开销，这将迫使我在将来保持大量的标记同步。我已经看到了像这样的解决方案，我很想使用它，但我仍然觉得它“闻起来”不对劲。还有没有其他人有更易维护、更简单的解决...

问ASP.NET中继器交替行突出显示而不完全展开<alternatingitemtemplate/>
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET中继器交替行突出显示而不完全展开<alternatingitemtemplate/>EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET中继器交替行突出显示而不完全展开<alternatingitemtemplate/>
EN