Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2019, 19:30
Новичок на форуме
Отправить личное сообщение для nubie Посмотреть профиль Найти все сообщения от nubie
 
Регистрация: 02.07.2019
Сообщений: 2

Сравнить данные из массива и таблицы, подсветить в таблице совпадающие данные
Всем привет, помогите решить задачку.
Имеется HTML таблица:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
<style  type="text/css">
* { padding: 0; margin: 0; }
html, body {margin: 0; padding: 0;}
#content {float:left; }
table td { border: 1px solid silver; width: 45px; height: 45px;}
</style>
</head>

<body>

<div id="content">
<table id="myTable">
<tr>
<td>10-11</td>
<td>10-12</td>
<td>10-13</td>
<td>10-14</td>
<td>10-15</td>
</tr>
<tr>
<td>11-11</td>
<td>11-12</td>
<td>11-13</td>
<td>11-14</td>
<td>11-15</td>
</tr>
<tr>
<td>12-11</td>
<td>12-12</td>
<td>12-13</td>
<td>12-14</td>
<td>12-15</td>
</tr>
<tr>
<td>13-11</td>
<td>13-12</td>
<td>13-13</td>
<td>13-14</td>
<td>13-15</td>
</tr>
<tr>
<td>14-11</td>
<td>14-12</td>
<td>14-13</td>
<td>14-14</td>
<td>14-15</td>
</tr>
</table>
</div>

</body>


И простенький скрипт, переберающий данные из таблицы и массива:

$(document).ready(function (){
var table = document.getElementById('myTable');
var num = [ '10-12', '10-14', '11-13', '12-14', '12-15', '14-11'];
	for ( var i = 0; i < table.rows.length; i++ ) {
		for ( var j = 0; j < table.rows[0].cells.length; j++ ) {
			for (var k = 0; k < num.length; k++){
			if (table.rows[i].cells[j].innerHTML === num[k]) 
			alert ("ura");
			}
		}
	}
});


Вопрос. Как подсветить в HTML таблице ячейки совпадающие с элементами массива. Пример упрощенный, реальные таблица и массив значительно больше. Заранее извиняюсь, я начинающий.
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2019, 19:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

nubie,
опишите класс в css, например .select{color : red;} и замените алерт на table.rows[i].cells[j].classList.add("select")
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2019, 20:14
Новичок на форуме
Отправить личное сообщение для nubie Посмотреть профиль Найти все сообщения от nubie
 
Регистрация: 02.07.2019
Сообщений: 2

Сообщение от рони Посмотреть сообщение
nubie,
опишите класс в css, например .select{color : red;} и замените алерт на table.rows[i].cells[j].classList.add("select")
Рони, спасибо огромное. Вы мой кумир. Не один свой вопрос решил, читая именно Ваши ответы на этом форуме. А сегодня чего-то затупил. Ответ исчерпывающий. Для себя заменил на .select{background-color : red;}.

P.S.: И конечно плюс Вам в карму.
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2019, 20:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

nubie,
поиск без jquery
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style  type="text/css">
* { padding: 0; margin: 0; }
html, body {margin: 0; padding: 0;}
#content {float:left; }
table td { border: 1px solid silver; width: 45px; height: 45px;}
.select{background-color : red; color : hsl(0, 0%, 100%);}
</style>
</head>

<body>

<div id="content">
<table id="myTable">
<tr>
<td>10-11</td>
<td>10-12</td>
<td>10-13</td>
<td>10-14</td>
<td>10-15</td>
</tr>
<tr>
<td>11-11</td>
<td>11-12</td>
<td>11-13</td>
<td>11-14</td>
<td>11-15</td>
</tr>
<tr>
<td>12-11</td>
<td>12-12</td>
<td>12-13</td>
<td>12-14</td>
<td>12-15</td>
</tr>
<tr>
<td>13-11</td>
<td>13-12</td>
<td>13-13</td>
<td>13-14</td>
<td>13-15</td>
</tr>
<tr>
<td>14-11</td>
<td>14-12</td>
<td>14-13</td>
<td>14-14</td>
<td>14-15</td>
</tr>
</table>
</div>
<script>
   addEventListener("DOMContentLoaded", () => {
   const num = [ '10-12', '10-14', '11-13', '12-14', '12-15', '14-11'];
   for(const {textContent, classList} of document.querySelectorAll("#myTable td"))
    num.includes(textContent) && classList.add("select")
   })
</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сравнить два массива объектов Роман Андреевич Общие вопросы Javascript 0 15.04.2019 15:22
Проблема получения объекта JSON espltd Элементы интерфейса 13 03.02.2016 14:55
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 22:53