j테이블 행의 각 루프 쿼리

j테이블 행의 각 루프 쿼리

이 질문에는 이미 다음과 같은 답변이 있습니다.

JQuery를 사용하여 테이블 행을 반복하고 일부 셀 값에 액세스하는 방법 (3개 답변)

닫힘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를 작성하여 다음과 같이 각 트랙을 반복합니다.

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

하지만 문제는 제가 원하지 않는 "tblTwo"의 "tr"을 통해서도 반복된다는 것입니다.이것을 해결할 수 있는 무언가를 제안해 줄 수 있는 사람?

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>

---

인 바닐라JS사용가능document.querySelectorAll()줄 위를 걸어다닐 수 있습니다.forEach()

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

그냥 추천:

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

즉시 자식 선택기 사용 >:

$('#tblOne > tbody  > tr')

설명:"부모"가 지정한 요소 중 "자녀"가 지정한 모든 직접 자식 요소를 선택합니다.

언급URL : https://stackoverflow.com/questions/10431987/jquery-each-loop-in-table-row