Форум

dashbog · #1 (**permalink**) 02.04.2016, 18:56

Всем привет!
Надо сделать расписание, чтоб подсвечивалась та программа, которая сейчас в эфире. Расписание в виде таблицы. Получается подсветить не только программу, которая в эфире, но и прошедшие, что не нужно.
Для удобства упростил время к числам.

<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet">
	<script type="text/javascript" src="js/scripts.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>

    <table id="ttable">
	  <tbody>
		<tr>
		  <td>Тиждень</td>
		  <td>1</td>
		</tr>
		<tr>
		  <td>Про гроші</td>
		  <td>2</td>
		</tr>
		<tr>
		  <td>Новини</td>
		  <td>3</td>
		</tr>
		<tr>
		  <td>Телемагазин</td>
		  <td>6</td>
		</tr>
	  </tbody>


	</table>
  </body>
</html>

function ttt() {
		var d = new Date();
		var h = d.getHours();
		var m = d.getMinutes();
		t = 3.5;
		var nTable = document.getElementById('ttable');
		nRows = nTable.rows.length;
		nCells = nTable.rows[0].cells.length;
		for (i=0; i<nRows; i++)
			{
			 for (n=0; n<nCells; n++)
				{
				 var tmp = nTable.rows[i].cells[n].innerHTML;
				 
				 if ( tmp[0] <= t ){
					 
					 nTable.rows[i].style.backgroundColor = 'yellow'}
				 }
			
			}

		}
	
	window.onload=ttt;

Спасибо!

ruslan_mart · #2 (**permalink**) 02.04.2016, 19:21

dashbog, тогда лучше делать проверку на tmp > t, если условие срабатывает, то красим предыдущую строку и выходим из цикла с помощью break.

dashbog · #3 (**permalink**) 02.04.2016, 19:32

Ruslan_xDD,
Гениально! Спасибо!

dashbog · #4 (**permalink**) 02.04.2016, 20:19

Со временем не выходит, и по-моему оно сравнивает еще и с ячейкой названия. Подзскажите плз.

<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet">
	<script type="text/javascript" src="js/scripts.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>

    <table id="ttable">
	  <tbody>
		<tr>
		  <td>Тиждень</td>
		  <td>19:00</td>
		</tr>
		<tr>
		  <td>Про гроші</td>
		  <td>19:30</td>
		</tr>
		<tr>
		  <td>Новини</td>
		  <td>20:00</td>
		</tr>
		<tr>
		  <td>Телемагазин</td>
		  <td>20:30</td>
		</tr>
	  </tbody>


	</table>
  </body>
</html>

function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }
		function ttt() {
		var d = new Date();
            h = checkTime(d.getHours()),
            m = checkTime(d.getMinutes()),
		t = h + ":" + m;
		var nTable = document.getElementById('ttable');
		nRows = nTable.rows.length;
		nCells = nTable.rows[0].cells.length;
		for (i=0; i<nRows; i++)
			{
			 for (n=0; n<nCells; n++)
				{
				 var tmp = nTable.rows[i].cells[n].innerHTML;
				 
				 if ( tmp[0] > t ){
					 alert(t);
					 nTable.rows[i-1].style.backgroundColor = 'yellow';
					 break;
				 }
			
			}
		}
		}
	window.onload=ttt;

ruslan_mart · #5 (**permalink**) 02.04.2016, 20:55

var table = document.getElementById('ttable'),
	rows = table.rows,
	currentDate = new Date,
	currentTime = currentDate.getHours() + ':' + currentDate.getMinutes();
for(var i = 0, lastIndex; i < rows.length; i++) {
	if(rows[i].cells[1].innerHTML <= currentTime) {
		lastIndex = i;
	}
}

if(lastIndex in rows) {
	rows[lastIndex].style.backgroundColor = 'yellow';
}

dashbog · #6 (**permalink**) 02.04.2016, 21:14

Спасибо, Профессор!
Но, все-таки, корректно работает только с добавлением нолей (функция "checkTime").

function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

function ttt () {
	var table = document.getElementById('ttable'),
	rows = table.rows,
	currentDate = new Date,
	currentTime = checkTime(currentDate.getHours()) + ':' + checkTime(currentDate.getMinutes());
for(var i = 0, lastIndex; i < rows.length; i++) {
	if(rows[i].cells[1].innerHTML <= currentTime) {
		lastIndex = i;
		alert(currentTime);
	}
}

if(lastIndex in rows) {
	rows[lastIndex].style.backgroundColor = 'yellow';
}
}
window.onload=ttt;

Буду учиться дальше.

dashbog · #7 (**permalink**) 02.04.2016, 21:18

Ruslan_xDD,
Уникальное решение. Еще раз спасибо!

Форум

Справочник

Discord чат

Курсы javascript