테이블/데이터베이스 값에 따른 테이블 배경/텍스트 색상

간단하게 하기 위해서!
HTML 테이블을 사용하면 데이터를 행과 열로 정렬할 수 있습니다. 일반적으로 정적 데이터가 포함된 HTML 테이블이 있으면 원하는 CSS 색상을 사용하여 테이블을 꾸밀 수 있습니다. 이 문서에서는 관심 있는 테이블 값이나 열에 따라 다른 색상을 사용하여 웹 페이지 및 기타 HTML 문서 내에서 테이블 배경 및 텍스트 색상을 설정하는 방법을 보여줍니다. API 또는 데이터베이스 응답은 전송된 요청에 따라 항상 다른 범주와 값을 가지므로 더 나은 시각화를 위해 표시 색상을 구분해야 합니다.

판매 옵션과 구매 옵션이 모두 있는 마케팅 회사의 웹 페이지를 개발 중이라고 가정해 보겠습니다. 이 범주는 서로 다른 값을 가지며 다르게 표시해야 합니다.

다음 HTML 테이블을 예로 사용합니다.

정적 데이터가 포함된 HTML 표

<div class="table-responsive">
  <table id="table"  class="table table-striped ">
    <thead>
      <tr>
        <th data-field="trx_date" scope="col">Transaction Date</th>
        <th data-field="order_type" scope="col">Buy/Sell</th>
        <th data-field="total_trx" scope="col">Total Transaction</th>
        <th data-field="SecInfo" scope="col">Details</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sell">Buy</td>
        <td class = "price">500</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/18/2016</th>
        <td class="sell">Sell</td>
        <td class = "price">400</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/19/2016</th>
        <td class="sell">Sell</td>
        <td class = "price">450</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/19/2016</th>
        <td class="sell">Buy</td>
        <td class = "price">900</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/20/2016</th>
        <td class="sell">Sell</td>
        <td class = "price">500</td>
        <td><a href="">Details</a></td>
      </tr>
      <tr>
        <th scope="row">8/20/2016</th>
        <td class="sell">Buy</td>
        <td class = "price">200</td>
        <td><a href="">Details</a></td>
      </tr>
      </tbody>
  </table>
</div>

API/데이터베이스 데이터가 포함된 HTML 테이블

<div class="table-responsive">
  <table id="table"  class="table table-striped ">
    <thead>
      <tr>
        <th data-field="trx_date" scope="col">Transaction Date</th>
        <th data-field="order_type" scope="col">Buy/Sell</th>
        <th data-field="total_trx" scope="col">Total Transaction</th>
        <th data-field="SecInfo" scope="col">Details</th>
      </tr>
    </thead>
     <tbody >
         <tr>
           {% for category in data %}
                <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
                <td >{{category.date}</td>
                 <td class="sell" >{{category.type}}</td>
                 <td class ="price">{{category.amount}}</td>
                 <td >{{category.details}}</td>
          </tr>
              {% endfor %}  
        </tbody>
  </table>
</div>

이제 매도 및 매수 값이 있는 행에 별도의 배경이 있는지 확인하고 싶습니다. 아래와 같이 간단한 JavaScript 스크립트를 사용하겠습니다. 먼저 테이블을 설정합니다td CSSclass = "sell"

$('.sell').each(function(){
  if($(this).text() == 'sell'){
    $(this).parent().css({'background-color' : '#B0E0E6'})
  }
  else{
     $(this).parent().css({'background-color' : '#FAFA'})
  }
 });

구매 및 판매 금액도 우리가 사용하는 다른 텍스트 색상을 갖도록 하여 가격 범주를 다른 CSS 클래스로 설정합니다. class = "price"

// loop through the 8 rows
  for (let i = 0; i < 8; i++) {
    let price = document.getElementsByClassName('sell')[i].innerText;
    console.log(price)
    if (price == 'Sell'){  
        document.getElementsByClassName('price')[i].style.color = '    #ff0000'
    }  else{ 
        document.getElementsByClassName('price')[i].style.color = '    #0000FF'
    }
}

그리고 멋진 테이블이 있습니다!. 좋아하는 CSS 색상 사용