167 lines
5.8 KiB
HTML
167 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Динамическая таблица</title>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid black;
|
|
padding: 5px;
|
|
}
|
|
|
|
.red {
|
|
background-color: red;
|
|
}
|
|
|
|
.blue {
|
|
background-color: aqua;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<label for="tableSize">Введите размер таблицы (1-50): </label>
|
|
<input type="number" id="tableSize" min="1" max="50">
|
|
<button onclick="createTable()">Создать таблицу</button>
|
|
<button onclick="removeRows()">Удалить строки</button>
|
|
<button onclick="replaceCells()">Заменить ячейки</button>
|
|
<button onclick="reflectRows()">Отразить строки</button>
|
|
|
|
<div id="tableContainer"></div>
|
|
|
|
<script>
|
|
function createTable() {
|
|
let tableSize = parseInt(document.getElementById("tableSize").value);
|
|
if (tableSize < 1 || tableSize > 50) {
|
|
alert("Размер таблицы должен быть от 1 до 50");
|
|
return;
|
|
}
|
|
|
|
let tableContainer = document.getElementById("tableContainer");
|
|
tableContainer.innerHTML = '';
|
|
|
|
let table = document.createElement('table');
|
|
table.setAttribute('id', 'dynamicTable');
|
|
|
|
for (let i = 1; i <= tableSize; i++) {
|
|
let row = document.createElement('tr');
|
|
row.classList.add(i % 2 === 1 ? 'red' : 'blue');
|
|
for (let j = 1; j <= i; j++) {
|
|
let cell = document.createElement('td');
|
|
if (j === 1 || j === i || i === tableSize) {
|
|
cell.textContent = i;
|
|
}
|
|
// cell.classList.add(j % 2 === 0 ? 'red' : 'blue');
|
|
row.appendChild(cell);
|
|
}
|
|
table.appendChild(row);
|
|
}
|
|
tableContainer.appendChild(table);
|
|
}
|
|
|
|
function removeRows() {
|
|
let sumThreshold = parseInt(prompt("Введите пороговое значение суммы:"));
|
|
if (isNaN(sumThreshold)) {
|
|
alert("Некорректное значение суммы");
|
|
return;
|
|
}
|
|
|
|
let table = document.getElementById('dynamicTable');
|
|
if (!table) {
|
|
alert("Сначала создайте таблицу");
|
|
return;
|
|
}
|
|
|
|
let rows = table.getElementsByTagName('tr');
|
|
for (let i = rows.length - 1; i >= 0; i--) {
|
|
let cells = rows[i].getElementsByTagName('td');
|
|
let sum = 0;
|
|
for (let j = 0; j < cells.length; j++) {
|
|
let cellValue = parseInt(cells[j].textContent);
|
|
if (!isNaN(cellValue))
|
|
sum += parseInt(cells[j].textContent);
|
|
}
|
|
|
|
if (sum < sumThreshold)
|
|
table.removeChild(rows[i]);
|
|
}
|
|
}
|
|
|
|
function replaceCells() {
|
|
let choice = prompt("Выберите 'сумма' (1) или 'среднее' (2)");
|
|
if (choice !== '1' && choice !== '2') {
|
|
alert("Некорректное значение");
|
|
return;
|
|
}
|
|
|
|
let table = document.getElementById('dynamicTable');
|
|
if (!table) {
|
|
alert("Сначала создайте таблицу");
|
|
return;
|
|
}
|
|
|
|
let rows = table.getElementsByTagName('tr');
|
|
let sum = 0;
|
|
let count = 0;
|
|
for (let i = 0; i < rows.length; i++) {
|
|
let cells = rows[i].getElementsByTagName('td');
|
|
for (let j = 0; j < cells.length; j++) {
|
|
let cellValue = parseInt(cells[j].textContent);
|
|
if (!isNaN(cellValue)) {
|
|
sum += cellValue;
|
|
count++;
|
|
}
|
|
}
|
|
}
|
|
|
|
let avg = sum / count;
|
|
for (let i = 1; i < rows.length; i++) {
|
|
let row = rows[i];
|
|
if (row.classList.contains('red')) {
|
|
continue;
|
|
}
|
|
let cells = row.getElementsByTagName('td');
|
|
for (let j = 0; j < cells.length; j++) {
|
|
if (choice === '1') {
|
|
if (!isNaN(parseInt(cells[j].textContent))) {
|
|
cells[j].textContent = sum;
|
|
}
|
|
} else if (choice === '2') {
|
|
if (!isNaN(parseInt(cells[j].textContent))) {
|
|
cells[j].textContent = avg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function reflectRows() {
|
|
let table = document.getElementById('dynamicTable');
|
|
if (!table) {
|
|
alert("Сначала создайте таблицу");
|
|
return;
|
|
}
|
|
let rows = table.getElementsByTagName('tr');
|
|
|
|
let tableContainer = document.getElementById("tableContainer");
|
|
tableContainer.innerHTML = '';
|
|
|
|
let newTable = document.createElement('table');
|
|
newTable.setAttribute('id', 'dynamicTable');
|
|
let tableSize = rows.length;
|
|
for (let i = 1; i <= tableSize; i++) {
|
|
let row = rows[tableSize - i].cloneNode(true);
|
|
newTable.appendChild(row);
|
|
}
|
|
tableContainer.appendChild(newTable);
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |