|
Сообщение от garrip91
|
|
2. А КАК БЫ ВЫ НА МОЁМ МЕСТЕ ЭТО СДЕЛАЛИ?
|
Уже из самого названия вашего проекта известно, что подходящим элементом будет <table>. Размер таблицы умножения может быть разным. Например, вас могут интересовать произведения чисел от 2 до 9 на 5. Также вас может интересовать конкретно какой-то особенный кусочек таблицы умножения. Например, произведения от 3×7 до 5×9 тоже составляют таблицу умножения. Или все произведения двухзначных чисел от 10 до 20 (получается таблица умножения от 10×10 до 20×20). Такие параметры таблицы умножения можно указать через собственный атрибут data-multiplication-range, например, в формате JSON. Для того, что бы описать простую таблицу умножения, достаточно 4 числа — первые два указывают на произведение этих чисел в левом верхнем углу таблицы, а оставшиеся два — на произведение этих чисел в правом нижнем углу таблицы. Т. е. чтобы отобразить в вашем приложении таблицу умножения, достаточно следующего кода HTML.
<table data-multiplication-range="[1,3, 10,9]"></table>
Теперь достаточно дописать скрипт, который превращал бы данную таблицу в полноценную таблицу умножения. Также я добавил стили, но они играют чисто косметичекую роль.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Таблица умножения</title>
<style>
[data-multiplication-range],
[data-multiplication-range] tbody,
[data-multiplication-range] tr,
[data-multiplication-range] td
{
display: block;
}
[data-multiplication-range] {
margin: 1em;
}
[data-multiplication-range] tbody {
display: flex;
flex-wrap: wrap;
}
[data-multiplication-range] tr {
margin-bottom: .3em;
}
[data-multiplication-range] td {
--border-width: 1px;
border: var(--border-width) solid #aaa;
margin-top: calc(-1 * var(--border-width));
margin-left: calc(-1 * var(--border-width));
padding: .25em .5em;
white-space: nowrap;
}
[data-multiplication-range] td:nth-child(odd) {
background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<table data-multiplication-range="[2,5, 9,5]"></table>
<table data-multiplication-range="[5,2, 5,9]"></table>
<table data-multiplication-range="[3,7, 5,9]"></table>
<table data-multiplication-range="[1,3, 10,9]"></table>
<table data-multiplication-range="[10,10, 20,20]"></table>
<script>
for(const table of document.querySelectorAll("[data-multiplication-range]")) {
const [fromX, fromY, toX, toY] = JSON.parse(table.dataset.multiplicationRange);
const tBody = table.createTBody();
for(let y = fromY; y <= toY; y++) {
const row = tBody.insertRow();
for(let x = fromX; x <= toX; x++) {
const cell = row.insertCell();
cell.textContent = `${x} × ${y} = ${x * y}`;
}
}
}
</script>
</body>
</html>
P.S. Для тех, кто изучает JavaScript.
Вместо того, чтобы искать подходящие таблицы, как это сделано в примере выше (с атрибутом data-multiplication-range), попробуйте создать свой собственный элемент <multiplication-table> с собственным атрибутом range, при изменении которого, будет отрисовываться соответствующая таблица. (или сделайте расширение элемента при помощи атрибута is)
Возможные варианты использования
<multiplication-table range="[1,3, 10,9]"></multiplication-table>
<multiplication-table from="1×3" to="10×9"></multiplication-table>
Или придумайте другие названия и атрибуты!
https://developer.mozilla.org/en-US/...ustom_elements
P. P. S
|
Сообщение от рони
|
|
Привет! Вы куда-то пропали с форума, всё ли у вас в порядке?
|
Всё в порядке. Я не пропал, вот я тут печатаю, значит не пропал.
(Ну я же не буду отвечать подряд на все вопросы, даже не на те, типо как скрыть кнопку/текстик/картиночку при помощи jQuery, несмотря на то, что есть <details>)