Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2015, 23:50
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Использование CSS атрибута в Javascript
Есть массив из td, каждый элемент которого имеет data-cell атрибут.
n - это произвольное число, с которого начинается значение атрибута.
В CSS я могу обратиться к любому элементу следующим образом:

td[data-cell|="n"] {
       background-color: red;
       margin-top: 10px;
      ...
}


В JS мне нужно сделать условие:

if (i === td[data-cell|="n"]) {
......
};

i - любое число.

Каким образом можно интерпретировать такую конструкцию CSS селектора в JS?
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2015, 00:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Alexander Belov,

var td = document.querySelector('td[data-cell="'+i+'"]');
if(td) {};


http://learn.javascript.ru/dataset-api

Последний раз редактировалось рони, 07.04.2015 в 00:33.
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2015, 06:58
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

В своём варианте я могу сравнивать число i с началом атрибута data-cell, записанного в формате n-nn-nnnn. Соответственно, условие выполняется, если i === n
В Вашем варианте, как я понял, просто выбираются все элементы td с атрибутом data-cell.
И консоль возвращает null к такому выражению.
http://jsbin.com/zileriyaji/2/edit?h...console,output
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2015, 08:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Alexander Belov,
прямую черту добавьте |
Сообщение от Alexander Belov
выбираются все элементы
один
Ответить с цитированием
  #5 (permalink)  
Старый 07.04.2015, 23:44
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

рони,
Подскажите, пожалуйста, как обратиться к нужному элементу в такой ситуации:
1) У меня есть input, его value - это число от 1 до ...
2) Есть td в таблице с data-cell атрибутом в формате data-cell = "3-4-2015" (вместо цифры "3" может быть любое число).

Я хочу обратиться к определённой td через введённое в input число.
var v = input.value;
var tdAttr = document.querySelector('td[data-cell|="'+i+'"]');

if(v === tdAttr) {
...}


Я использовал именно такую комбинацию селекторов для tdAttr, т.к. должна выцепляться только первая цифра / число до дефиса (в случае с примером выше - это цифра "три").
Т.о., если пользователь ввёл в input "3", мы, пробежавшись по массиву, должны получить td с атрибутом, начинающимся на "3". Но что-то не выходит так сделать.


http://jsbin.com/tiwoguyaxi/1/edit?h...console,output
Ответить с цитированием
  #6 (permalink)  
Старый 08.04.2015, 00:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Alexander Belov,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td {
    border: 1px solid blue;
    height: 100px;
    width: 100px;
}

td[data-cell|="2"] {
    background-color: red;
}

input {
  margin-bottom: 20px;
}
  </style>
</head>

<body>
<form>
  <input data-type="number" placeholder="Day" id="number" maxlength="2"  >

</form>

<table>
    <tr>
        <td data-cell="1-01-15"></td>
        <td data-cell="2-01-15"></td>
        <td data-cell="3-01-15"></td>
        <td data-cell="4-01-15"></td>
    </tr>
        <tr>
        <td data-cell="5-01-15"></td>
        <td data-cell="6-01-15"></td>
        <td data-cell="7-01-15"></td>
        <td data-cell="8-01-15"></td>
    </tr>
        <tr>
        <td data-cell="9-01-15"></td>
        <td data-cell="10-01-15"></td>
        <td data-cell="11-01-15"></td>
        <td data-cell="12-01-15"></td>
    </tr>
        <tr>
        <td data-cell="13-01-15"></td>
        <td data-cell="14-01-15"></td>
        <td data-cell="15-01-15"></td>
        <td data-cell="16-01-15"></td>
    </tr>
</table>
<script>
var number = document.getElementById('number');
number.onchange = function() {
var v = this.value;
var tdAttr = document.querySelector('td[data-cell|="'+v+'"]');

if(tdAttr) {  tdAttr.style.backgroundColor = 'red'
}

}
</script>
</body>

</html>

Последний раз редактировалось рони, 08.04.2015 в 00:21.
Ответить с цитированием
  #7 (permalink)  
Старый 08.04.2015, 07:08
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

рони,
благодарю за помощь!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS генератор на JavaScript _0_ Ваши сайты и скрипты 8 24.03.2018 11:54
Веб-технолог (HTML, CSS, JavaScript) Geometria.ru iriniksmi Работа 3 03.11.2011 20:39
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
javascript, css и iexplorer Блондинко Internet Explorer 4 21.02.2008 12:39