Как выбрать рандомно ячейку таблицы и подсветить ее зеленым цветом?

@inquisitor · Регистрация: 22.12.2015

Author24 — интернет-сервис помощи студентам

Как выбрать рандомно ячейку таблицы и подсветить ее зеленым цветом?

1) при первой загрузке страницы на JavaScript случайным образом должны быть выбраны день недели(столбец) и номер пары(строка), и под светиться эта ячейка зеленым цветом.
2) дальше при помощи выпадающего списка выбрать столбец и строку,нажать кнопку поиск и подсветить нужную ячейку зеленым цветом.

@renat_dmitriev · 20.12.2017, 12:01

А в чем возникли затруднения?
Вы не умеете пользоваться функцией Math.Random() ?
Не можете разложить полученный результат на строку и столбец?
Не можете найти нужный TD в таблице, зная номер строки и номер столбца?
Не знаете как установить выбранной ячейке класс ?
Не знаете как в css элементам определенного класса задать свойство background-color ?

Конкретизируйте пожалуйста вопрос.

@inquisitor · 20.12.2017, 12:35 **[ТС]**

Сообщение от renat_dmitriev

Конкретизируйте пожалуйста вопрос.

1) Ручной режим по нажатию на кнопку поиск у нас таблица 5х7=35 ячеек.Как подсветить зеленым скажем Столбец3 и Строка 4
2) Как при загрузке страницы рандомно выбрать ячейку и подсветить ее зеленным.Конкретную ячейку,а не все ячейки.

PHP/HTML

<!DOCTYPE html>
<html">
<head>
    <title>Лабораторная работа №1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
divTable{
    display: table;
    width: 100%;
    background-color:#aaa;
 
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}
 
 input[type="button"]{
    width:185px;  
    margin-top: 5px; 
}
 
#SelectMyLove,#SelectMyLove2{
width:200px;
margin-top: 5px; 
 }
 
.Table1{
width:100%;
background-color:#eee;
border:1px solid black;
}
 
td,tr{
border:1px solid black;
}
    
  </style>
</style>
</head>
<body>
    <script type="text/javascript">
int y=0;
    function getRandomInRange(max) {
  return Math.floor(Math.random() * (max  + 1)) + max;
}
 
 
          
function check(button){
// получаем индекс выбранного элемента
 var selind = document.getElementById("SelectMyLove").options.selectedIndex;
 var selind2 = document.getElementById("SelectMyLove").options.selectedIndex;
   
   var txt= document.getElementById("SelectMyLove").options[selind].text;
   var txt2= document.getElementById("SelectMyLove").options[selind].text;
  
  var val= document.getElementById("SelectMyLove").options[selind].value;
  var val2= document.getElementById("SelectMyLove").options[selind].value;
  
  //Количество срок и столбцов в таблице 5х7
          y=getRandomInRange(7);
//Для столбцов         
if(val=="Столбец1")
{
//alert("Мужской");
 
}
else if(val=="Столбец2")
{
//alert("Женский");
 
}
else if(val=="Столбец3")
{
//alert("Женский");
 
}
else if(val=="Столбец4")
{
//alert("Женский");
 
}
else if(val=="Столбец5")
{
//alert("Женский");
 
}
else if(val=="Столбец6")
{
//alert("Женский");
 
}
else if(val=="Столбец7")
{
//alert("Женский");
 
}
else 
{
//alert("Выберите столбец");
 
}
 
 
          y=getRandomInRange(5, 7);
//Для строк       
if(val=="Строка1")
{
//alert("Мужской");
 
}
else if(val=="Строка2")
{
//alert("Женский");
 
}
else if(val=="Строка3")
{
//alert("Женский");
 
}
else if(val=="Строка4")
{
//alert("Женский");
 
}
else if(val=="Строка5")
{
//alert("Женский");
 
}
else if(val=="Строка6")
{
//alert("Женский");
 
}
else if(val=="Строка7")
{
//alert("Женский");
 
}
else 
{
//alert("Выберите строку");
 
}
        return true;        
        }         
 
</script>
   
 
    
    
    
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
    <p><b>Дни недели:</b><br>
<select id='SelectMyLove'>
<option disabled>Выберите столбец</option>
  <option value="Столбец1">Столбец1</option>
  <option value="Столбец2">Столбец2</option>
  <option value="Столбец3">Столбец3</option>
  <option value="Столбец4">Столбец4</option>
  <option value="Столбец5">Столбец5</option>
  <option value="Столбец6">Столбец6</option>
  <option value="Столбец7">Столбец7</option>
</select>
</div>
<div class="divTableCell">
<p><b>Пары:</b><br>
<select id='SelectMyLove2'>
<option disabled>Выберите строку</option>
  <option value="Строка1">Строка1</option>
  <option value="Строка2">Строка2</option>
  <option value="Строка3">Строка3</option>
  <option value="Строка4">Строка4</option>
  <option value="Строка5">Строка5</option>
  <option value="Строка6">Строка6</option>
  <option value="Строка7">Строка7</option>
</select>
</div>
<div class="divTableCell">
    <p><b></b><br> <input  type="button"   value="Поиск"  onclick="check(this)"/>
</div>
</div>
</div>
</div>  
    
        
<table class="Table1">
    <tr>
        <td>Понедельник</td>
        <td>Вторник</td>
        <td>Среда</td>
        <td>Четверг</td>
        <td>Пятница</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
    <tr>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
    </tr>
    <tr>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>
</body>
</html>

@kalabuni · 20.12.2017, 13:52

формализую задачу:
на странице имеем
1) два тега <select>
в первом id="day" -- 7-мь опшенов (дни недели)
во втором id="par" --5-ть опшенов (номера пар);

2) таблицу <table id="tbl"> из 7-ми строк (дни недели) и 5-ти столбцов ( номера пар)

3) имеем кнопку <input id="btn" type="button" id="btn" value="Поиск">
------
необходимо наделить страницу по окончанию её загрузки следующей функциональностью:
1) в <select id="day"> рандомно выбирается один опшен (какой-то день недели из 7-ми)
2) в <select id="par"> рандомно выбирается один опшен (какой-то номер пары (из 5-ти)
3) кнопка <input id="btn"> наделяется функциональностью: по нажатию на неё в <select>'ах прочитываются индексы выбранных опшенов и соответствующая ячейка таблицы <table id="tbl"> изменяет свой фон.
------

вывод первый: "скрипач не нужен", т.е кнопка -- совершенно лишнее звено,можно и нужно убрать
вывод второй: к обоим <select>'ам добавить самым первым еще по опшену с текстами:
"Выберите день недели" и "Выберите пару"

вывод третий: таблицу дополнить
сверху еще одной строкой, содержащей текст "первая вторая третья четвертая пятая"
слева ещё одним столбцом, содержащим текст
"понедельник
вторник
среда
четверг
пятница
суббота
воскресенье"

в левой верхней ячейке прописать текст "дни / пары"

вывод третий наделить оба <select>'a функциональностью по событию выбора опшена onchange делать то, что ранее делала ныне удаленная кнопка

вывод четвертый: пару, положим, можно выбрать рандомно, но день недели практичнее выбрать соответствующий реально текущему

итого: задачка уровня младшей группы детского сада

свистните, если предложенное решение устраивает - через 20 минут после того, как увижу здесь ваш "свисток", будет выложен HTML+JS-код

@inquisitor · 20.12.2017, 14:19 **[ТС]**

Сообщение от kalabuni

свистните, если предложенное решение устраивает - через 20 минут после того, как увижу здесь ваш "свисток", будет выложен HTML+JS-код

устраивает,я тем временем выложу задачу так,как она написана,меня не забанят))

Лабораторная работа 3
Изменение свойств CSS и использование функций в JavaScript
Цель работы: Создать страницу, для которой управление элементами страницы осуществлялось бы в интерактивном режиме с помощью событий JavaScript.
Порядок выполнения работы:
1. При разработке страницы используйте изображение, представляющее собой фотографию расписания (не разрезайте его на куски, поскольку все ячейки одинакового размера!), которое представляет собой понедельное расписание занятий. Для удобства считаем, что деление на верхнюю и нижнюю недели отсутствует.
4. При первой загрузке страницы с помощью программы на JavaScript случайным образом должны быть выбраны день недели и номер пары, выполнен поиск заданной ячейки и подсвечена на экране найденная пара.
5. Запрашивайте у пользователя (используйте элементы форм HTML) координаты вывода ячейки на экран.
6. При наведении мышки на ячейку расписания меняйте цвет ячейки расписания на зеленый. Когда мышка покидает карту, меняйте цвет прямоугольника обратно.

2 и 3 нет.

Добавлено через 3 минуты
Вот нашел пример,при нажатии на кнопку поиск и выбранном столбце и строке находиться нужная ячейка и красным подсвечиваеться.

Добавлено через 5 минут

Сообщение от scherbakovss201

Вот нашел пример,при нажатии на кнопку поиск и выбранном столбце и строке находиться нужная ячейка и красным подсвечиваеться.

При загрузке страницы не выбирается рандомно и не подсвечивается.Работает только по нажатию на кнопку поиск..

@kalabuni · 20.12.2017, 14:21

Сообщение от scherbakovss201

меня не забанят

нельзя выкладывать фотку задания, а набранный ручками текст можно
мой вариант, кстати, заданию не соответствует, ибо нужна фотка расписания
приложите её к своему ответу на этот мой пост

@inquisitor · 20.12.2017, 15:17 **[ТС]**

Сообщение от kalabuni

мой вариант, кстати, заданию не соответствует, ибо нужна фотка расписания
приложите её к своему ответу на этот мой пост

у меня ее СЕЙЧАС нет.Сказали можно без нее.

Добавлено через 31 минуту

Сообщение от scherbakovss201

у меня ее СЕЙЧАС нет.Сказали можно без нее.

Как то так

@renat_dmitriev · 20.12.2017, 16:39

Выделение цветом ячейки по номеру строки и столбца

Javascript

function selectCell(row, column)
{
    var currentSelection = document.querySelector('.table1 td[selected]'); //Находим текущую выделенную ячейку
    if(currentSelection)currentSelection.removeAttribute('selected'); //если найдена то снимаем выделение
    
    var newSelection = document.querySelector('.table1').rows[row].cells[column - 1]; // находим строку и столбец
    newSelection.setAttribute('selected', true); //Устанавливаем атрибут selected, который затем будем использовать в css для раскраски
}

CSS

.table1 td[selected]
{
    background-color: green;
}

Добавлено через 7 минут
Как при загрузке страницы рандомно выбрать ячейку и подсветить ее зеленным.

Javascript

function randomChoice(rows = 6, columns = 5)
{
    var cellsCount = rows * columns;
    
    var rndCellNumber = Math.floor(Math.random() * cellsCount);
    var row = Math.floor(rndCellNumber / columns) + 1;
    var column = (rndCellNumber % columns) + 1;
    
    selectCell(row, column);
}
 
randomChoice();

Добавлено через 8 минут
И наконец при нажатии на кнопку "Поиск"

Javascript

function onSearchClick()
{
    var column = +selectMyLove.  value.substr(7);
    var row = +selectMyLove2.value.substr(6);
    
    selectCell(row, column);
}

Блоги программистов
Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного суматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .
Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .	Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .	Инструкция по установке python3.13.1 в Debian 12 AlexSky-coder 03.01.2025 sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .	Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов. Hrethgir 03.01.2025 В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .	Python в помощь DevOps IT_Exp 03.01.2025 Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
		1
	Как выбрать рандомно ячейку таблицы и подсветить ее зеленым цветом? 20.12.2017, 02:30. Показов 4586. Ответов 7 Метки нет (Все метки) 1) при первой загрузке страницы на JavaScript случайным образом должны быть выбраны день недели(столбец) и номер пары(строка), и под светиться эта ячейка зеленым цветом. 2) дальше при помощи выпадающего списка выбрать столбец и строку,нажать кнопку поиск и подсветить нужную ячейку зеленым цветом. 0

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	20.12.2017, 12:01	2
	А в чем возникли затруднения? Вы не умеете пользоваться функцией Math.Random() ? Не можете разложить полученный результат на строку и столбец? Не можете найти нужный TD в таблице, зная номер строки и номер столбца? Не знаете как установить выбранной ячейке класс ? Не знаете как в css элементам определенного класса задать свойство background-color ? Конкретизируйте пожалуйста вопрос. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	20.12.2017, 13:52	4
	формализую задачу: на странице имеем 1) два тега <select> в первом id="day" -- 7-мь опшенов (дни недели) во втором id="par" --5-ть опшенов (номера пар); 2) таблицу <table id="tbl"> из 7-ми строк (дни недели) и 5-ти столбцов ( номера пар) 3) имеем кнопку <input id="btn" type="button" id="btn" value="Поиск"> ------ необходимо наделить страницу по окончанию её загрузки следующей функциональностью: 1) в <select id="day"> рандомно выбирается один опшен (какой-то день недели из 7-ми) 2) в <select id="par"> рандомно выбирается один опшен (какой-то номер пары (из 5-ти) 3) кнопка <input id="btn"> наделяется функциональностью: по нажатию на неё в <select>'ах прочитываются индексы выбранных опшенов и соответствующая ячейка таблицы <table id="tbl"> изменяет свой фон. ------ вывод первый: "скрипач не нужен", т.е кнопка -- совершенно лишнее звено,можно и нужно убрать вывод второй: к обоим <select>'ам добавить самым первым еще по опшену с текстами: "Выберите день недели" и "Выберите пару" вывод третий: таблицу дополнить сверху еще одной строкой, содержащей текст "первая вторая третья четвертая пятая" слева ещё одним столбцом, содержащим текст "понедельник вторник среда четверг пятница суббота воскресенье" в левой верхней ячейке прописать текст "дни / пары" вывод третий наделить оба <select>'a функциональностью по событию выбора опшена onchange делать то, что ранее делала ныне удаленная кнопка вывод четвертый: пару, положим, можно выбрать рандомно, но день недели практичнее выбрать соответствующий реально текущему итого: задачка уровня младшей группы детского сада свистните, если предложенное решение устраивает - через 20 минут после того, как увижу здесь ваш "свисток", будет выложен HTML+JS-код 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	20.12.2017, 14:19 [ТС]	5
	Сообщение от kalabuni свистните, если предложенное решение устраивает - через 20 минут после того, как увижу здесь ваш "свисток", будет выложен HTML+JS-код устраивает,я тем временем выложу задачу так,как она написана,меня не забанят)) Лабораторная работа 3 Изменение свойств CSS и использование функций в JavaScript Цель работы: Создать страницу, для которой управление элементами страницы осуществлялось бы в интерактивном режиме с помощью событий JavaScript. Порядок выполнения работы: 1. При разработке страницы используйте изображение, представляющее собой фотографию расписания (не разрезайте его на куски, поскольку все ячейки одинакового размера!), которое представляет собой понедельное расписание занятий. Для удобства считаем, что деление на верхнюю и нижнюю недели отсутствует. 4. При первой загрузке страницы с помощью программы на JavaScript случайным образом должны быть выбраны день недели и номер пары, выполнен поиск заданной ячейки и подсвечена на экране найденная пара. 5. Запрашивайте у пользователя (используйте элементы форм HTML) координаты вывода ячейки на экран. 6. При наведении мышки на ячейку расписания меняйте цвет ячейки расписания на зеленый. Когда мышка покидает карту, меняйте цвет прямоугольника обратно. 2 и 3 нет. Добавлено через 3 минуты Вот нашел пример,при нажатии на кнопку поиск и выбранном столбце и строке находиться нужная ячейка и красным подсвечиваеться. Добавлено через 5 минут Сообщение от scherbakovss201 Вот нашел пример,при нажатии на кнопку поиск и выбранном столбце и строке находиться нужная ячейка и красным подсвечиваеться. При загрузке страницы не выбирается рандомно и не подсвечивается.Работает только по нажатию на кнопку поиск.. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	20.12.2017, 14:21	6
	Сообщение от scherbakovss201 меня не забанят нельзя выкладывать фотку задания, а набранный ручками текст можно мой вариант, кстати, заданию не соответствует, ибо нужна фотка расписания приложите её к своему ответу на этот мой пост 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	20.12.2017, 15:17 [ТС]	7
	Сообщение от kalabuni мой вариант, кстати, заданию не соответствует, ибо нужна фотка расписания приложите её к своему ответу на этот мой пост у меня ее СЕЙЧАС нет.Сказали можно без нее. Добавлено через 31 минуту Сообщение от scherbakovss201 у меня ее СЕЙЧАС нет.Сказали можно без нее. Как то так 0

	20.12.2017, 16:39

Как выбрать рандомно ячейку таблицы и подсветить ее зеленым цветом?

Решение