Using just div to put together a table and set cell color based on text

Just 2 lines of code using jQuery you can set cell color of certain cells based on text of the cell.

by Duke Dinh

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="interfaces">Interfaces</div>
<div class="div-table">
    <div class="div-table-header">
        <div class="div-table-header-col">Status</div>
        <div class="div-table-header-col">Interface Name</div>
        <div class="div-table-header-col">Connector Type</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Up</div>
        <div class="div-table-col">Gig 0/1</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Up</div>
        <div class="div-table-col">Gig 0/2</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Down</div>
        <div class="div-table-col">Gig 0/3</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Up</div>
        <div class="div-table-col">Gig 0/4</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Down</div>
        <div class="div-table-col">Gig 0/5</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-status"><i class="fa fa-circle"></i></div>
        <div class="div-table-col">Up</div>
        <div class="div-table-col">Gig 0/6</div>
        <div class="div-table-col">Ethernet</div>
    </div>
    <div class="div-table-row">
        <div...

CSS

.interfaces {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 16px;
}

.div-table {
	display: table;
	/* width: auto; */
	/* background-color: #eee; */
	border-collapse: collapse;
	/* width: 90%; */
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 14px;
}

.div-table-header {
	display:table-row;
	width:auto;
	clear:both;
}

.div-table-row {
	display:table-row;
	width:auto;
	clear:both;
}


.div-table-header-col {
	float:left;/*fix for  buggy browsers*/
	display:table-column;         
	width:120px;         
	/* background-color:#ccc; */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;  
	padding-bottom: 10px;
}

.div-table-col {
	float:left;/*fix for  buggy browsers*/
	display:table-column;         
	width:120px;         
	/* background-color:#ccc; */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #5983a4;
	padding-bottom: 5px;
}

.div-table-status {
	float:left;/*fix for  buggy browsers*/
	display:table-column;         
	width:20px;         
	/* background-color:#ccc; */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: green;
	padding-bottom: 5px;
}

JavaScript

$(document).ready(function(){
    $('.div-table-col:contains("Down")').css('color', '#f85556')
                                        .siblings().css('color', '#f85556');
                                        
})