There are several blocks of the same type:

<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>

Task: if in a block with a class .b-matrix there is a child span with a class .result (or with another class), then the input tags in the table of this particular block should be set to placeholder - this.tableBox.input.setAttribute('placeholder', 'c ' + i + ',' + j); There are several blocks, respectively, there should be a condition - If there is a span with the class result, then we get a 1.1 a2,2, etc., and if the class of the span is different, then b 1,1 b 1,2 and so on .

I think it should be something like this:

 (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); } } } })();

But so far my knowledge of JS is not enough to solve this, as I understand it, simple task. Please give advice on how to solve it. Thank you in advance.

  • what pure-js - Grundy
  • @Grundy, this is pure js without libraries. - Astor
  • there is a javascript label for this - Grundy
  • ok. I'll know. - Astor
  • @Astor is an interesting feature, you are doing a loop on elem.legnth , BUT elem not declared anywhere. How so? Or did you not add something to the code? - Vasily Barbashev

1 answer 1

The querySelectorAll function allows you to use css selectors, so you can first select all the span elements with the result class that lie inside the .b-matrix elements. Then run through them and get a parent: they will be just the right container.

In this case, you need to use this particular function, since querySelector returns the first matching element, and not all.

It remains only to get the fields entered from the table and assign them a placeholder

A small example:

 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>

Update: to make the code more general, it is worth changing the markup a little, for example, instead of the span element, use the data-* attributes

 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>

  • thank. Answer accepted. But how to implement it, if there are several such blocks, they have different classes for span'ov? Accordingly, in the end, we should get a ${indexRow+1}, ${indexInput+1} , b $ {indexRow + 1}, $ {indexInput + 1} `, etc. I understand that there should be a condition, but it is not quite clear exactly which place of this implementation. - Astor
  • @Astor, you should add the necessary information to the question itself, with examples, and you should not take the question just like that :) - Grundy
  • @Astor, the simplest option is to write a separate function for each case in which to change the necessary elements - Grundy
  • but this is duplication of the code ... Surely there is a more rational way? :) - Astor
  • Added information to the question. - Astor