0
<script>
    $('#example tbody').eq(1).find('tr').each(function(i) {
                this.arr.push({
                    first: i,
                    cg: $(this).find('input').eq(0).val(),
                    close: $(this).find('input').eq(1).is(':checked')
                });
            })
</script>

Помогите, пожалуйста, переписать кусок кода на чистый JS. Уже голова кругом идёт от попыток.

var foo= document.querySelector('#example tbody');
        foo[1].getElementsByTagName('tr').each(function(i) {
                this.arr.push({
                    first: i,
                    cg: foo.getElementsByTagName('input')[0].value,
                    close: foo.getElementsByTagName('input')[1].is(':checked')
                });
            });

Вот что у меня получилось на данный момент. Не могу понять, что делать с is(':checked') и не нашёл аналог each

Разметка

<table id="example">
    <tbody>
        <tr></tr>
    </tbody>
    <tbody>
        <tr></tr>
    </tbody>
    ...
</table>
1

2 ответа 2

1

Думаю, как-то так:

//а логичнее было бы для манипуляции всеми строками таблицы сразу их и выбрать
var tr = (document.querySelectorAll('#example>tbody')[1]).querySelectorAll('tr');
//т.к. мы получили коллекцию элементов типа Node нам нельзя использовать методы массивов, однако есть способ...
Array.prototype.forEach.call(tr, function(element, index, array){
    //а вот тут-то начинается самое интересное - что это за arr и в какой-такой объект this он входит?
    //оставлю Вам разбираться с местоположением arr самому :)
    //а сам предположу, что этот arr был создан ранее, например так var arr = [];
    arr.push({
        first: index,
        cg: (element.getElementsByTagName('input')[0]).value,
        close: (element.getElementsByTagName('input')[1]).hasAttribute('checked') ? true : false,
    });
});

UPD. Спасибо @Grundy за подсказку, поправил код.

2
  • 1
    обратите внимание на eq(1) в вопросе
    – Grundy
    12 янв 2016 в 18:46
  • @LivAlex спасибо! Ваш вариант подошёл. Только часть "hasAttribute('checked') ? true : false" заменил на "checked": первое почему-то работать не хотело.
    – Deerz
    13 янв 2016 в 12:06
1

Еще один вариант:
Так как известно какие элементы нам нужны, можно их получить с помощью одного запроса

var trs = document.querySelectorAll('#example tbody:nth-child(2) tr')

Важно: используется nth-child(2), так как в оригинальном коде eq(1) выбирает второй элемент, потому что индексация начинается с 0.

далее можно бежать либо как предложил @LivAlex либо с помощью обычного цикла

for(var i=0, len=trs.length; i<len; i++){
    var elem = trs[i];
    //так как this внутри each указывает на html элемент, то вместо оригинального this, можно использовать переменную elem
    /*elem.arr.push({
                ...
            })
    */
}

Интересно, что за один проход цикла, одному элементу в это свойство arr которое хранится отдельно в каждом элементе, добавляется объект содержащий индекс строки, а так же два вложенных элемента. Не могу утверждать, но возможно планировалось, чтобы это был общий массив, один на все элементы.

Далее заполнение самого объекта:

//получаем input'ы внутри таблицы
var inputs = elem.querySelectorAll('input');

{
    index: i,
    cg: inputs[0].value,
    close: inputs[1].checked
}

Обратите внимание: используется свойство checked так как при изменении состояния пользователем, атрибут может не меняться.

И все вместе:

function A() {
  var trs = document.querySelectorAll('#example tbody:nth-child(2) tr');
  for (var i = 0, len = trs.length; i < len; i++) {
    var elem = trs[i];

    elem.arr = elem.arr || []; //если свойство отсутствовало, инициализируем пустым массивом
    var inputs = elem.querySelectorAll('input');
    elem.arr.push({
      index: i,
      cg: inputs[0].value,
      close: inputs[1].checked
    });

  }
}

document.getElementById('btn').addEventListener('click', function() {
  A();
  document.getElementById('res').innerHTML = '<br />Arr:' + JSON.stringify(document.querySelector('#example tbody:nth-child(2) tr').arr);
});
<table id="example">
  <tbody>
    <tr>
      <td>
        <input type="text" value="10" />
        <input type="checkbox" checked />
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>
        <input type="text" value="100" />
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

<input type="button" value="check" id="btn" />
<div id="res"></div>

2
  • Спасибо большое за вклад в мои знания и активную помощь с вопросом!
    – Deerz
    13 янв 2016 в 12:08
  • @Deerz, обратите внимание на использование arr - возможно это должно быть какой-то отдельной переменной :-)
    – Grundy
    13 янв 2016 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.