Форум

Alexander Belov · #1 (**permalink**) 06.04.2015, 23:50

Есть массив из 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

Alexander Belov,

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

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

Alexander Belov · #3 (**permalink**) 07.04.2015, 06:58

В своём варианте я могу сравнивать число 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

Alexander Belov,
прямую черту добавьте |

Сообщение от Alexander Belov

выбираются все элементы

один

Alexander Belov · #5 (**permalink**) 07.04.2015, 23:44

рони,
Подскажите, пожалуйста, как обратиться к нужному элементу в такой ситуации:
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

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>

Alexander Belov · #7 (**permalink**) 08.04.2015, 07:08

рони,
благодарю за помощь!

Форум

Справочник

Discord чат

Курсы javascript