IT TIP

jQuery 테이블 행의 각 루프

itqueen 2020. 10. 27. 23:55
반응형

jQuery 테이블 행의 각 루프


중복 가능성 :
JQuery로 테이블 행을 반복하고 일부 셀 값에 액세스하는 방법은 무엇입니까?

나는 다음과 같은 것을 가지고 있습니다.

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

다음과 같이 각 tr을 반복하도록 jQuery를 작성했습니다.

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

그러나 문제는 내가 원하지 않는 "tblTwo"의 "tr"을 반복한다는 것입니다. 누구든지 이것을 해결하기 위해 제안 해 주시겠습니까?


jQuery에서는

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

직계 하위 선택기 ( >)를 사용하면 직계 하위 항목 ( 모든 하위 항목이 아님)을 살펴 봅니다.


VanillaJS 당신이 사용할 수있는 document.querySelectorAll()및 사용하여 행을 걸어forEach()

[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(tr) {
    /* 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
  }
}

Use immediate children selector >:

$('#tblOne > tbody  > tr')

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

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

반응형