Cách tạo kiểu hàng xen kẽ trong asp.net mvc

Tôi đang sử dụng <% foreach ...%> lặp lại để liệt kê một tập hợp các mục trên trang web của mình.Cách tạo kiểu hàng xen kẽ trong asp.net mvc

Tôi muốn thêm màu nền khác cho kiểu xen kẽ các hàng trong danh sách của tôi. Tôi đã tìm thấy một cách để làm điều này nhưng tôi không hài lòng với nó vì nó có vẻ giống như một hack.

Dưới đây là những gì tôi đã làm để giải quyết nó cho đến nay:

<table> 
    <% int counter = 0; 
     foreach (var item in Model) 
     { 
      counter++; 

      if (counter % 2 == 0) 
      { 
    %> 
      <tr class="colorfull"> 
      <% } 
      else 
      { %> 
      <tr> 
      <% } %> 
...

Có một thực hành tốt nhất mà tôi đang mất tích mà người đang sử dụng cho kịch bản này trong ASP.NET MVC?

Nguồn

2009-10-19 YeahStu

Tôi đã tìm thấy đoạn mã JQuery này, mà tôi thấy rõ ràng hơn.

$(document).ready(function() { $("table tr:nth-child(odd)").addClass("colorfull"); });

Tôi đã loại bỏ logic truy cập. Kịch bản lệnh JQuery này điều khiển DOM để thiết lập lớp css của mỗi hàng khác trong vòng lặp foreach.

Nguồn

2009-10-19 02:44:23 YeahStu

Tôi khuyên bạn nên này, không súp thẻ dành cho bạn! – jfar

http://roshanbh.com.np/2008/03/different-color-alternate-row-jquery.html –

Tôi đã nhìn thấy dòng này được lặp lại trong một số câu hỏi tương tự nhưng nó luôn nằm ngoài ngữ cảnh. Bạn sẽ đặt cái này ở đâu? (Tôi rất mới với mvc, jquery và phát triển web nói chung!) – Lewray

Nếu bạn muốn nó sạch hơn, tôi khuyên bạn nên viết phần mở rộng tùy chỉnh HtmlHelper. Tôi sẽ không sử dụng jquery như stu42 gợi ý đơn giản chỉ vì tôi muốn nhìn vào javascript hoàn toàn cho hành vi. Lý tưởng nhất, và hy vọng trong tương lai không xa, bạn sẽ sử dụng css tinh khiết cho mục đích này. Cho đến lúc đó, tôi sẽ để nó trong đánh dấu, như bạn hiện đang làm, nhưng với một phần mở rộng xử lý logic, kéo nó ra khỏi aspx.

Nguồn

2009-10-19 02:58:42 dustyburwell

Bạn có thể cung cấp một ví dụ về điều này có thể trông như thế nào không? – YeahStu

Nếu bạn là các loại táo bạo ai muốn nhảy vào CSS3

tr:nth-child(odd)  { background-color:#eee; } 
tr:nth-child(even)  { background-color:#fff; }

Nguồn

2009-10-19 03:09:53 Perpetualcoder

Làm việc trong cáo lửa, chrome, nhưng không phải trong IE: ( – Sly

thậm chí không trong IE 8? O havent thử nghiệm trên IE 8 bản thân mình nhưng tôi tưởng tượng nó sẽ ... gói dịch vụ !! – Perpetualcoder

Không hoạt động trong IE 8 trên Win7 x64 – Sly

Nếu bạn không muốn sử dụng một lớp học mà bạn có thể thiết lập css trực tiếp với jquery.

Giả thẻ bảng của bạn là: <table id="tb">..., bạn chỉ cần phải thiết html của bạn như sau:

<head> 
<script language="javascript" type="text/javascript" src="jquery-min.js"/> 
</head> 

<body> 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#tb tr:odd").css("background-color", "#F4F4F8"); 
    }); 
    </script> 

    <table id="tb"> 
     <tr><th>Id</th><th>Name</th></tr> 
     <tr><td>1</td><td>Junior</td></tr> 
     <!--more rows here... --> 
    </table> 
</body>

Nguồn

2010-04-10 17:10:33

Cách tạo kiểu hàng xen kẽ trong asp.net mvc

Trả lời

Các vấn đề liên quan