Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

JQuery каждый цикл в строке таблицы

Автор вопроса: ANPОтветов: 3

У меня есть что-то вроде:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

Я написал jQuery для перебора каждого tr, например:

$('#tblOne tr').each(function() {...code...});

Но проблема в том, что он перебирает "tr" из "tblTwo", чего я тоже не хочу. Кто-нибудь может предложить что-нибудь, чтобы решить эту проблему?

javascriptjqueryeachhtml-tabletablerow

Ответы

Ответ 1 · рейтинг 233 · Fabrizio Calderan

В jQuery просто используйте:

$('#tblOne > tbody  > tr').each(function() {...code...});

Используя селектор дочерних элементов (>), вы пройдете по всем дочерним элементам (а не всем потомкам), например, с тремя строками:

$('table > tbody  > tr').each(function(index, tr) {
   console.log(index);
   console.log(tr);
});

Результат:

0
<tr>
1
<tr>
2
<tr>

В VanillaJS вы можете использовать document.querySelectorAll() и перемещаться по строкам, используя forEach().

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(index, tr) {
    /* console.log(index); */
    /* console.log(tr); */
});

Ответ 2 · рейтинг 69 · GNi33

Просто рекомендация:

Я бы рекомендовал использовать реализацию таблицы DOM, она очень проста и проста в использовании, вам действительно не нужен jQuery для этой задачи.

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}

Ответ 3 · рейтинг 21 · Sarfraz

Используйте непосредственный селектор дочерних элементов >:

$('#tblOne > tbody  > tr')

Описание: Выбирает все прямые дочерние элементы, указанные в параметре "дочерний элемент", из элементов, указанных в параметре "родительский".

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы