열 데이터의 일부를 기반으로 테이블 행의 배경색을 변경하십시오.

Question

이 질문에 대한 변형이 있었지만 찾고자하는 것이 상당히 만족 스럽다는 것을 발견하지 못했습니다. 내가 가진 것은 다음과 같습니다. 사용자의 로그인 자격 증명에 따라 데이터가 동적으로 입력되는 테이블이 있습니다. 테이블의 데이터는 ProductID 필드 앞에 (a) 또는 (b) 또는 (c) 등을 표시하여 구성되어 함께 구성됩니다. 클라이언트는 (a)가있는 행의 배경색을 원한다고하자. 그들은 (b)가있는 행을 파란색으로 원합니다. (c) 녹색으로. 너는 그 패턴을 본다. JavaScript 또는 jQuery에서이 작업을 수행하는 방법을 알아야하지만 가능한 경우 사용할 코드의 양을 최소화하고 싶습니다. 나도 좋지는 않지만 샘플 코드로 작업하고 올바른 결과를 얻으려고 노력할 수 있습니다. 아무도 도와 줄 수 있습니까? 어쩌면 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

내가 실제로 작동있어거야. 그것은 jQuery의 'contains'를 사용합니다. 그러면 회사 로그인이 무엇인지 살펴 본 다음 ID가 'table1'인 테이블의 행을보고 (A) 또는 (B) 또는 (C)와 일치하는지 확인합니다. 그렇다면 배경색을 지정합니다. 같은 배경색을 가지고있을 때 행이 함께 실행 되었기 때문에 아래쪽 테두리 특성을 추가했습니다. 희망이 다른 사람을 도와줍니다.

var tempCustomerName; 
var CustomerName; 
tempCustomerName = document.getElementById("CustomerName").innerHTML; 
CustomerName = tempCustomerName; 
if (CustomerName.indexOf('Test Company') != -1) { 
$("#table1 tr td").css("border-bottom", "1px solid #000 !important"); 
$("#table1 tr:contains('(A)')").css("background", "#66CC99"); 
$("#table1 tr:contains('(B)')").css("background", "#FFCC33"); 
$("#table1 tr:contains('(C)')").css("background", "#FFFF33"); 
$("#table1 tr:contains('(D)')").css("background", "#9999FF"); 
$("#table1 tr:contains('(E)')").css("background", "#3399FF"); 
$("#table1 tr:contains('(F)')").css("background", "#FF3333"); 
$("#table1 tr:contains('(G)')").css("background", "#FF9900"); 
$("#table1 tr:contains('(H)')").css("background", "#66CC99"); 
$("#table1 tr:contains('(I)')").css("background", "#FFCC33"); 
$("#table1 tr:contains('(J)')").css("background", "#FFFF33"); 
$("#table1 tr:contains('(K)')").css("background", "#9999FF"); 
$("#table1 tr:contains('(L)')").css("background", "#3399FF"); 
$("#table1 tr:contains('(M)')").css("background", "#FF3333"); 
$("#table1 tr:contains('(N)')").css("background", "#FF9900"); 
$("#table1 tr:contains('(O)')").css("background", "#66CC99"); 
$("#table1 tr:contains('(P)')").css("background", "#FFCC33"); 
$("#table1 tr:contains('(Q)')").css("background", "#FFFF33"); 
$("#table1 tr:contains('(R)')").css("background", "#9999FF"); 
$("#table1 tr:contains('(S)')").css("background", "#3399FF"); 
$("#table1 tr:contains('(T)')").css("background", "#FF3333"); 
$("#table1 tr:contains('(U)')").css("background", "#FF9900"); 
$("#table1 tr:contains('(V)')").css("background", "#66CC99"); 
$("#table1 tr:contains('(W)')").css("background", "#FFCC33"); 
$("#table1 tr:contains('(X)')").css("background", "#FFFF33"); 
$("#table1 tr:contains('(Y)')").css("background", "#9999FF"); 
$("#table1 tr:contains('(Z)')").css("background", "#3399FF"); 
} 

Answer 2

다음은 jQuery를 사용한 샘플 솔루션입니다. 표와

$(document).ready(function() { 
    var table = $('#foo'), 
     rows = table.find('tr'), cells, background, code;   
    for (var i = 0; i < rows.length; i+=1) { 
     cells = $(rows[i]).children('td'); 
     code = $(cells[0]).text().substr(0, 3);   
     switch (code) { 
      case '(A)': 
       background = '#e29e6e'; 
       break; 
      case '(B)': 
       background = '#f9cf80'; 
       break; 
      case '(C)': 
       background = '#ffe8c0'; 
       break; 
      default: 
       background = '#95704e'; 
     } 
     $(rows[i]).css('background-color', background); 
    } 
}); 

: 먼저 당신이 rows 변수에 모든 행을 받고있어이 코드에서

<table id="foo"> 
    <tr> 
     <td>(A) 10x12 Blue Bag</td> 
     <td>Val</td> 
    </tr> 
    <tr> 
     <td>(A) 15x12 Red Bag</td> 
     <td>Val</td> 
    </tr> 
    <tr> 
     <td>(B) 10x12 T-shirt</td> 
     <td>Val</td> 
    </tr> 
    <tr> 
     <td>(A) 10x12 Yellow Bag</td> 
     <td>Val</td> 
    </tr> 
    <tr> 
     <td>(C) 10x12 Shoes</td> 
     <td>Val</td> 
    </tr> 
</table> 

. 그런 다음 현재 행 ($(rows[i]))의 모든 셀을 셀 배열로 가져옵니다. 그런 다음 행 배경색에 따라 달라지는 열이 첫 번째 열이라고 가정 할 수 있습니다. 그런 다음 스위치에 값 ($(cells[0]).text())이 있는지 확인한 후 현재 행을 페인팅합니다. 도움이 되길 바랍니다. 여기

// 결과 : 여기 http://jsfiddle.net/cEY7K/6/