Таблица умножения с кликабельными ячейками :)
Этот "детский" пример понадобился мне вчера для иллюстрации пары приёмов PHP/Javascript программирования. Вот ссылка и полный код скрипта:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Кликабельная таблица умножения с параметрами число строк и число столбцов</title>
</head>
<body>
<script type="text/javascript">
function color (i,j) {
var id=i+'t'+j;
var oldcolor=document.getElementById(id).style.backgroundColor;
var color;
if (oldcolor=='') {
var ints=new Array ('9','A','B','C');
var len=ints.length-1;
color='#';
for (var k=0;k<6;k++) {
var digit=ints[Math.round(Math.random()*len)];
color+=digit;
}
}
else {
color='';
}
if (i && j) document.getElementById(id).style.backgroundColor=color;
document.getElementById(i+'t0').style.backgroundColor=color;
document.getElementById('0t'+j).style.backgroundColor=color;
}
</script>
<?php
function trimall($string) { return trim(preg_replace('/\s+/','',$string)); }
$params = array ('rows','cols');
foreach ($params as $num=>$var) {
if (!empty($_POST[$var])) $$var = trimall(htmlspecialchars($_POST[$var],ENT_QUOTES,'UTF-8'));
else if (!empty($_GET[$var])) $$var = trimall(htmlspecialchars($_GET[$var],ENT_QUOTES,'UTF-8'));
else $$var = '';
}
$max_val = 100; //максимальный размер
if (empty($rows) or $rows<1 or $rows>$max_val) $rows=9;
if (empty($cols) or $cols<1 or $cols>$max_val) $cols=9;
echo '<font size="1">Таблица умножения с параметрами
"число строк" и "число столбцов" (до '.$max_val.'); ячейки с данными кликабельны</font><br>'."\n".
'<form name="f1" method="get">'."\n".
' Строк: <input type="text" size="4" maxlength="3" name="rows" value="'.$rows.'">'."\n".
' Столбцов: <input type="text" size="4" maxlength="3" name="cols" value="'.$cols.'">'."\n".
' <input type="submit" value="Таблица">'."\n".
'</form>'."\n".
'<pre><table border="1" cellpadding="4" cellspacing="0">'."\n";
$maxr = mb_strlen($rows*$cols,'UTF-8');
echo '<tr><td id="0t0" onclick="color(0,0)"> </td>'."\n";
for ($j=1; $j<=$cols; $j++) echo
'<td align="center" valign="middle" id="0t'.$j.'" onclick="color(0,'.$j.')"><b>'.$j.'</b></td>'."\n";
echo '</tr>'."\n";
for ($i=1; $i<=$rows; $i++) {
echo '<tr><td align="center" valign="middle" id="'.$i.'t0" onclick="color('.$i.',0)"><b>'.$i.'</b></td>'."\n";
for ($j=1; $j<=$cols; $j++) {
$n=$i*$j;
$n=sprintf ("%{$maxr}d",$n);
echo '<td id="'.$i.'t'.$j.'" onclick="color('.$i.','.$j.')">'.$n.'</td>'."\n";
}
echo '</tr>'."\n";
}
echo '</table></pre>'."\n";
?>
</body></html>
Функция color генерирует в одноимённой переменной фоновый цвет из интенсивностей, заданных массивом ints, который легко расширить. Сгенерированный цвет выставляется фоновым на ячейке, по которой сделали клик, плюс на заголовке строки и столбца. При повторном щелчке фоновый цвет сбрасывается (если oldcolor - текущий цвет, фона полученный из ячейки, не пуст). Следует учесть, что, в зависимости от браузера, свойство document.getElementById(id_объекта).style.backgroundColor может вернуть цвет и обычным 16-ричным кодом #40e0d0, и как rgb(64, 224, 208), то есть, списком десятичных значений интенсивностей красного, зелёного и синего цветов.
Если нужно удобно пометить идентификаторами ячейки таблицы, это можно сделать в виде строка_разделитель_столбец, причём строки и столбцы с содержимым нумеруются с единицы, а строка заголовка и левый столбец имеют номер 0. Пустая ячейка в верхнем левом углу таблицы, соответственно, называется 0t0.
Вывод чисел в таблице - форматированный, с лидирующими нулями. Общее количество цифр гибко меняется в зависимости от максимальной разрядности числа в таблице. А узнать разрядность числа в PHP проще всего строкой кода вида
$maxr = strlen(число);
Если число может оказаться не целым или отрицательным, подойдёт код
$maxr = strlen(floor(abs(число)));
Сам форматированный вывод с числом разрядов, заданным переменной $maxr, выполнит оператор
$n=sprintf ("%0{$maxr}d",$n);
с последующей печатью значения $n оператором echo или print.
Здесь вывод чисел выполняется с лидирующими нулями, если это не нужно, шаблон изменится на "%{$maxr}d".
15.09.2013, 12:31 [12337 просмотров]