当前位置:编程学习 > C#/ASP.NET >>

一行显示两个数据项,行与行的样式是不同的呈交替出现,这种情况怎么绑定数据呢?

一行显示两个数据项,行与行的样式是不同的呈交替出现,这种情况怎么绑定数据呢? 



<div class="characteristic_list">       
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd>
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd>
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd class="alternately">
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd class="alternately">
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd>
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  <dl>
       <dt><img src="images/pic3_1(2).jpg" alt="" width="194" height="147" /></dt>
   <dd>
         <h5>蔬菜产地</h5>
 酒店全部使用德清农家自种蔬菜,不添加任何有害化学元素,可以放心使用。
   </dd>
  </dl>
  
 </div>
--------------------编程问答-------------------- 交替行:设置添加 ItemTemplate和 AlternatingItemTemplate,应用样式即可
一行2列,设置外围容器宽度包含2个子容器宽度即可,或者你用datalist也行

此外,交替行样式也可用jquery解决,很方便! --------------------编程问答-------------------- 这个用控件实现麻烦,不过还是可以,我没有试过,我一般不用的控件实现,

试试用for输出实现一下 --------------------编程问答-------------------- 用repeater可以做到吧 ·你去网上搜搜· --------------------编程问答-------------------- 听说 asp.net 的 datalist 可以实现这个效果 --------------------编程问答-------------------- datalist 和repeater都能做,
<%# Container.ItemIndex %2==0?"style1":"style2" %>样式可以通过ItemIndex 的奇偶来判断 --------------------编程问答-------------------- 解决了
<script>
var obj=$(".characteristic_list dl"),j=obj.length;
for (var i=0;i<j;i+=2){
if (cu(i)=="r")obj[i].style.background=obj[i+1].style.background="#f00"
if (cu(i)=="y")obj[i].style.background=obj[i+1].style.background="#ff0"
}
function cu(k){
if (k%2==0 && (k/2)%2==0)return "r"
return "y"
}
</script>
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,