sample: set background-color with only even table rows after filtered

by sii_side

HTML

<table id="table1">
  <tbody>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>2</td><td>1</td><td>1</td><td>1</td><td>○</td></tr>
    <tr><td>3</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>4</td><td>1</td><td>1</td><td>1</td><td>○</td></tr>
    <tr><td>5</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>6</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>7</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>8</td><td>1</td><td>1</td><td>1</td><td>○</td></tr>
    <tr><td>9</td><td>1</td><td>1</td><td>1</td><td>×</td></tr>
    <tr><td>10</td><td>1</td><td>1</td><td>1</td><td>○</td></tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid;
}

JavaScript

(function temporary() {
  //５列目の中身を順次取得
  var tbl = document.getElementById("table1");
  for (var i = 0, rowLen = tbl.rows.length; i < rowLen; i++) {
    var ans = tbl.rows[i].cells[4].innerHTML;

    //中身に○があった場合はその子ノードtr以降を非表示
    if (ans.match(/○/)) {
      var hide = tbl.rows[i];
      hide.style.display = "none";
    }
  }

  $('#table1 tbody tr').css({
    backgroundColor: '#FFFFFF',
    border: 'none'
  });

  $('#table1 tbody tr:visible').each(function(i) {
  	if(i % 2 === 0) {
    	$(this).css({
		    backgroundColor: '#FF0000',
    		border: 'none'
  		});
    }
  });
})();