JSFiddle - React, Tailwind, and code Playground

by Arsen

HTML

<div class="postsubject">
    <a href="http://nekrasovkapark.ru/chess.php?id=3&mode=single&mode=single" target="_blank">Квартал 5, дом Корпус 1</a>
  </div>
  <p style="margin-bottom:0px">Секций: 5</p>
  <center>
    <div style="margin-bottom:12px; text-align:center">
      <table border="0" cellpadding="0" cellspacing="4">
        <tbody>
          <tr>
            <td style="vertical-align:bottom;" valign="bottom">
              <table class="sec" border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td class="roof_left"> </td>
                    <td class="roof"> </td>
                    <td colspan="3">
                      <img src="http://nekrasovkapark.ru/images/chess/roof/roofc.gif" width="75" height="30">
                    </td>
                    <td class="roof"> </td>
                    <td class="roof_right"> </td>
                  </tr>
                  <tr>
                    <td class="ap_left_free">
                      <div class="tbl" title="#61, свободна, 2-комнатная, 1-я квартира на этаже" alt="#61, свободна, 2-комнатная, 1-я квартира на этаже" onclick="ajax_showTooltip(window.event,'get_chess.php?q=61&c=3&r=2&mode=mode',this);return false">
                        <a class="chess" href="#">61</a>
                      </div>
                    </td>
                    <td class="left_free">
                      <div class="tbl" title="#61, свободна, 2-комнатная, 1-я квартира на этаже" alt="#61, свободна, 2-комнатная, 1-я квартира на этаже" onclick="ajax_showTooltip(window.event,'get_chess.php?q=61&c=3&r=2&mode=mode',this);return false">
                        <a class="chess" href="#"> </a>
                      </div>
                    </td>
                    <td class="left_free">
                      <div class="tbl" title="#62, свободна, 1-комнатная, 2-я квартира на этаже" alt="#62, свободна, 1-комнатная, 2-я квартира на этаже"...

CSS

td
{
		padding: 0px;
}
a.chess {
	color: #000;
}
a.chess:hover{
	color: #FF3200;
}
.sec
{
	font-weight: bold;
	vertical-align: bottom;
	text-align: center;
	font-size: 10px;
}
.apcntr {
	background: url(http://nekrasovkapark.ru/images/chess/floorcenter.gif) no-repeat top;
	width: 25px;
	height: 25px;
	text-align: center;
}
.ap_left {
	background: url(http://nekrasovkapark.ru/images/chess/l2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.ap_left_free {
	background: url(http://nekrasovkapark.ru/images/chess/floorfree/l2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.left {
	background: url(http://nekrasovkapark.ru/images/chess/l.gif) no-repeat top;
	width: 25px;
	height: 25px;
}
.left_free {
	background: url(http://nekrasovkapark.ru/images/chess/floorfree/l.gif) no-repeat top;
	width: 25px;
	height: 25px;
}
.right {
	background: url(http://nekrasovkapark.ru/images/chess/r.gif) no-repeat top;
	width: 25px;
	height: 25px;
}
.right_free {
	background: url(http://nekrasovkapark.ru/images/chess/floorfree/r.gif) no-repeat top;
	width: 25px;
	height: 25px;
}
.ap_last {
	background: url(http://nekrasovkapark.ru/images/chess/r2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.ap_last_free {
	background: url(http://nekrasovkapark.ru/images/chess/floorfree/r2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.tbl
{
	cursor:pointer;
	padding-top:11px;
}
.roof
{
	background: url(http://nekrasovkapark.ru/images/chess/roof/roof_bg.gif) repeat-x bottom;
	vertical-align: bottom;
	text-align: center;
}
.door
{
	background: url(http://nekrasovkapark.ru/images/chess/door.gif) no-repeat top;
	width: 25px;
	height: 25px;
}
.f1ap_last_free {
	background: url(http://nekrasovkapark.ru/images/chess/firstfree/r2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.f1ap_last
{
	background: url(http://nekrasovkapark.ru/images/chess/firstlight/r2.gif) no-repeat top;
	width: 23px;
	height: 25px;
}
.f1first_free {
	background:...

JavaScript

(function houseStat() {
    var 
        tdList = document.getElementsByTagName('td'),
        postSubject = document.getElementsByClassName('postsubject')[0],
        tdCnt = tdList.length,
        i,
        freeCnt = 0,
        allCnt = 0,
        apartsClassNames = [
            'right',
            'right_free',
            'left',
            'left_free'
        ];
    
    if (!postSubject) {
        return;
    }
            
    for (i=0; i<tdCnt; i++) {
        var className = tdList[i].className;
        if (apartsClassNames.indexOf(className) > -1) {
            allCnt++;
            if (className.indexOf('free') > -1) {
                freeCnt++;
            }
        }
    }

    postSubject.innerHTML += '<br>Всего квартир: '+allCnt+
        '<br>Из них занято: '+(allCnt-freeCnt)+
        '<br>Свободно: '+freeCnt;
})();