Задать атрибут элементу при выполнении определенных условий

156

12 января 2020, 20:50

Есть несколько однотипных блоков:

<div class="b-matrix b-matrix_border">
  <span class="result"></span>
  <table class="b-matrix__table b-matrix__table_border">
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="c1,1" value="" disabled /></td>
      <td><input class="matrix-cell" type="text" placeholder="c1,2" value="" disabled /></td>
    </tr>
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="c2,1" value="" disabled /></td>
      <td><input class="matrix-cell" type="text" placeholder="c2,2" value="" disabled /></td>
    </tr>
  </table>
</div>
<div class="b-matrix b-matrix_border">
  <span class="matrix-name-A">A</span>
  <table class="b-matrix__table b-matrix__table_border">
    <tr>
      <td><input class="matrix-cell" type="text" placeholder="a1,1" value="" /></td>
      <td><input class="matrix-cell" type="text" placeholder="a1,2" value="" /></td>
    </tr>
  </table>
</div>

Задача: если в блоке с классом .b-matrix есть дочерний span с классом .result (или с другим классом), то тегам input в таблице конкретно этого блока задать placeholder - this.tableBox.input.setAttribute('placeholder', 'c ' + i + ',' + j); Блоков несколько, соответсвенно должно быть условие - Если есть span с классом result, то получаем а 1,1 а2,2 и т.д., а если класс у span другой, то b 1,1 b 1,2 и т.д.

Думаю, что должно быть как-то так:

(function setPlaceholder() { 
  var tableBox = document.querySelector('.b-matrix'); 
  var input = document.querySelector('input'); 
 
  if (tableBox.contains('<span></span>'.className == 'result')) { 
    for (var i = 1; i < elem.length; i++) { 
      for (var j = 1; j < elem.length; j++) { 
        input.setAttribute('placeholder', 'a ' + i + ',' + j); 
      } 
    } 
  } 
})();

Но пока моих знаний JS недостаточно для решения этой, насколько я понимаю, простой задачи. Просьба дать рекомендации по ее решению. Заранее благодарю.

Answer 1

функция querySelectorAll позволяет использовать css-селекторы, таким образом можно выбрать сначала все элементы span с классом result, которые лежат внутри элементов .b-matrix. Потом пробежаться по ним и получить родителя: им будет как раз нужный контейнер.

В данном случае нужно использовать именно эту функцию, так как querySelector возвращает первый подходящий элемент, а не все.

Далее остается просто получить поля вводи из таблицы и присвоить им placeholder

Небольшой пример:

function setPlaceholder() { 
  var matrices = [].map.call(document.querySelectorAll('.b-matrix>span.result'), 
    function(el) { 
      return el.parentNode; 
    }); 
  matrices.forEach(function(matrix) { 
    [].forEach.call(matrix.querySelectorAll('tr'), 
      function(tr, indexRow) { 
        [].forEach.call(tr.querySelectorAll('input'), function(input, indexInput) { 
          input.setAttribute('placeholder', `a ${indexRow+1}, ${indexInput+1}`); 
        }); 
      }); 
  }) 
} 
 
setPlaceholder();

<div class="b-matrix b-matrix_border"> 
  <span class="result"></span> 
  <table class="b-matrix__table b-matrix__table_border"> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" placeholder="c1,1" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" placeholder="c1,2" value="" disabled /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" placeholder="c2,1" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" placeholder="c2,2" value="" disabled /> 
      </td> 
    </tr> 
  </table> 
</div>

Обновление: чтобы сделать код более обобщенным, стоит немного изменить разметку, например, вместо элемента span использовать data-* атрибуты

function setPlaceholder() { 
  [].forEach.call(document.querySelectorAll('.b-matrix[data-name]'), 
    function(matrix) { 
      var placeholderStart = matrix.dataset["name"]; 
 
      [].forEach.call(matrix.querySelectorAll('tr'), 
        function(tr, indexRow) { 
          [].forEach.call(tr.querySelectorAll('input'), 
            function(input, indexInput) { 
              input.setAttribute('placeholder', `${placeholderStart} ${indexRow+1}, ${indexInput+1}`); 
            }); 
        }); 
    }) 
} 
 
setPlaceholder();

<div class="b-matrix b-matrix_border" data-name="c"> 
  <table class="b-matrix__table b-matrix__table_border"> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
  </table> 
</div> 
<div class="b-matrix b-matrix_border" data-name="a"> 
  <table class="b-matrix__table b-matrix__table_border"> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
  </table> 
</div> 
<div class="b-matrix b-matrix_border" data-name="b"> 
  <table class="b-matrix__table b-matrix__table_border"> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
      <td> 
        <input class="matrix-cell" type="text" value="" disabled /> 
      </td> 
    </tr> 
  </table> 
</div>