테이블에서 주어진 행의 배경색 변경하기

@ Html.CheckBox에서 사용되는 모델 (부울) 속성 값을 기반으로 테이블에서 주어진 행의 배경색을 변경해야합니다. 모델이 PostExampleCompleted 액션 메소드의 새 확인란 값으로 업데이트됩니다.테이블에서 주어진 행의 배경색 변경하기

<table> 
    <thead> 
     <tr> 
      <th>Item name</th> 
      <th>Comments</th> 
      <th>User</th> 
      <th>Complete</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="FooRow"> 
      <td>Foo</td> 
      <td>@Model.FooComments</td> 
      <td>@Model.FooUserName</td> 
      <td> 
       @using (Ajax.BeginForm("PostFooCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" })) 
       { 
        @Html.CheckBox("FooItemComplete", Model.FooComplete, new { onClick = "$(this).parent('form:first').submit();" }) 
       } 
      </td> 
     </tr> 
     <tr id="WidgetRow"> 
      <td>Widget</td> 
      <td>@Model.WidgetComments</td> 
      <td>@Model.WidgetUserName</td> 
      @using (Ajax.BeginForm("PostWidgetCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" })) 
       { 
        @Html.CheckBox("WidgetItemComplete", Model.WidgetComplete, new { onClick = "$(this).parent('form:first').submit();" }) 
       } 
      </td> 
     </tr> 
    </tbody> 
</table>

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 코드 예제는 감사하겠습니다 :).

감사합니다.

출처

2011-08-25 BigBadDom

정확히 무엇을하려하는지 이해 했으므로이 같은 트릭을해야합니다.

먼저 여기에 확인란을 선택하면 행 색상을 지정하는 데 사용한 CSS 클래스가 있습니다.

.redBackground 
{ 
    background-color: Red; 
}

다음은 체크 박스가있는 행의 색을 지정하는 JQuery 코드입니다.나는 또한 각 체크 박스에 'change'핸들러를 추가했다. 그래서 만약 그것들 중 하나가 업데이트 되었다면, 행 색상이 적절히 업데이트된다. (나는 체크 박스가 체크 된 행에 대해 빨간색을 사용했다. 확인란이 선택되지 않음).

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 

     $(function() { 

      $('input[type=checkbox]').each(function() { 

       var checkbox = $(this); 

       // if the checkbox is already checked, colour its row 
       CheckStatus(checkbox); 

       //Every time a check-box status changes we 
       //want to re-evaluate the row colour 
       checkbox.change(function() { 
        CheckStatus(checkbox); 
       }); 

      }); 

      //Method which checks if the check-box is checked. If it's checked 
      //the row is given the 'redBackground' class, otherwise it is taken away 
      function CheckStatus(checkbox) { 
       if (checkbox.attr('checked') == 'checked') { 
        checkbox.parent().parent().addClass('redBackground'); 
       } 
       else { 
        checkbox.parent().parent().removeClass('redBackground'); 
       } 
      } 

     }); 
</script>

는 희망이 의미가 있습니다 ... :) 난 당신이 자신의 요구 사항을 오해 생각

출처

2011-08-26 01:26:48

아마도 나는 뭔가를 놓치고 있습니다. 이것은 HTML이나 CSS에 대한 직업처럼 보입니다. 내가 할 수있는 한, 요구 사항에 따라 여러 가지 방법으로 접근 할 수 있습니다.

행별로 (즉, 값이 정적으로 저장되는 옵션이 아닌 앱이나 어딘가에 색상이 지정 될 때까지 색상이 무엇인지 모를 경우) html 스타일 속성 <tr style='background-color: @Model.Colour'>을 할당하십시오 원하는 색으로 background-color을 설정하십시오.

유형/상태를 기준으로 (즉, 어떤 색상이 미리 지정 될지 알 수 있지만 어떤 행을 할당 할 것인지는 알지 못합니다.) 각 행에 대해 클래스를 정의합니다. <tr class='@Model.Type'> CSS 클래스의 background-color에 Model.Type의 값과 동일한 이름을 지정합니다.

색상/유형 자체를 얻으려면 모델을 사용하여 전달해야합니다. 모델에 이미 해당 속성이있을 수 있습니다. 모르겠습니다.

간단한 교체 pattens 들어, simply use this technique 또는 :nth-child(odd) 및 :nth-child(even) CSS 선택기.

간혹 가장 간단한 해결책이 최선의 해결책입니다.

출처

2011-08-25 10:38:55

... 그는 모델의 값에 따라 행의 배경 색상을 설정하고자 을. Ajax 호출을 통해 모델 값을 변경할 수 있다는 점에서 문제가 있습니다. Ajax 양식이 실제로 모델 값을 변경하지는 않지만 오히려 해당 양식 내에서 컨트롤 값만 설정하는지는 확실하지 않습니다. – nttakr

동의합니다. 질문을 잘못 읽었습니다. –

네, 그 말이 맞습니다. 모델이 체크리스트 값으로 업데이트되었지만 이것이 내 주요 문제는 아닙니다. 같은 페이지를 새로 고침 할 필요가 없습니다. 사용자가 보지 못합니다. 그래서 이상적인 jQuery 기반 솔루션이 필요합니다. – BigBadDom

코드는 설정이 무엇인지 정확하게 파악하기 위해 조금씩 작습니다.

요소가 있다는 사실 때문에 테이블에 여러 행이 있다는 것을 추론합니다. 개인적으로 각 행에 AjaxForm을 사용하는 것에 반대합니다. 그것은 많은 오버 헤드처럼 보입니다.

모든 행을 처리하고 그 자체로 필요한 작업을 수행하는 jQuery 코드의 단일 구조를 매우 쉽게 작성할 수 있습니다.

jQuery의 라이브 기능을 사용하면 추가되는 행과 독립적입니다.

체크 박스 또는 행에는 컨트롤러에 ajax 호출을 다시 보낼 수있는 식별자가 있어야합니다. 성공시 체크 상자의 상태를 평가하고 행을 적절히 색칠 할 수 있습니다.

정말 도움이되는 코드가 더 필요합니다.

출처

2011-08-25 10:58:13 nttakr

테이블에서 주어진 행의 배경색 변경하기

답변

관련 문제