[jquery] jQuery를 사용하여 테이블 셀 값을 얻는 방법은 무엇입니까?

jQuery를 사용하여 각 행의 테이블 셀 값을 얻는 방법을 연구 중입니다.

내 테이블은 다음과 같습니다

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

기본적으로 테이블을 반복 Customer Id하고 각 행 의 열 값을 가져 옵니다.

아래 코드에서 각 행을 반복하기 위해이 작업을 수행해야한다는 것을 알았지 만 행의 첫 번째 셀 값을 얻는 방법을 모르겠습니다.

$('#mytable tr').each(function() {
    var cutomerId = 
}

답변

가능하면 고객 ID가 포함 된 TD에서 클래스 속성을 사용하여 다음과 같이 작성할 수 있습니다.

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

본질적으로 이것은 다른 솔루션과 동일하지만 (복사하여 붙여 넣기 때문일 수 있음) 열 주위를 이동하거나 고객 ID를 입력하면 코드의 구조를 변경할 필요가 없다는 이점이 있습니다. <span>클래스 속성을 유지하는 경우

그건 그렇고, 한 선택기에서 할 수 있다고 생각합니다.

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

그렇게하면 일이 쉬워집니다.

답변

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

당신이하고있는 일은 테이블의 모든 tr을 반복하고 루프의 현재 tr에서 첫 번째 td를 찾고 내부 html을 추출하는 것입니다.

특정 셀을 선택하기 위해 인덱스를 사용하여 셀을 참조 할 수 있습니다.

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

위의 코드에서 세 번째 행 의 값을 검색 할 것입니다 (인덱스는 0부터 시작하므로 첫 번째 셀 인덱스는 0입니다)

다음은 jQuery없이 수행 할 수있는 방법입니다.

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

답변

덜 덜한 접근법 :

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

이것은 최초가 아닌 셀에서 작동하도록 변경 될 수 있습니다.

답변

$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});

답변

이 시도,

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});

답변

해당 열에 id를 사용하지 않습니까? 그렇게 말해봐:

    <table width="300" border="1">
          <tr>
            <td>first</td>
          </tr>
          <tr>
            <td>second</td>
          </tr>
          <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td id="result">Where the result should occur</td>
          </tr>
    </table>


<script type="text/javascript">
        $('#result').html("The result is....");
</script>

답변

이 작동합니다

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});