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

213

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 = 
}
jquery 
— 숀 테일러
소스
4
다음은 테이블 셀 TD 값을 얻는 방법에 대한 라이브 데모가 포함 된 전체 자습서입니다. codepedia.info/jquery-get-table-cell-td-value-div
— Satinder singh

답변:

306

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

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

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

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

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

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

— 제니퍼
소스
4
나는 $ ( '# mytable td.customerIDCell'). each (function () {alert ($ (this) .html ());}); 하지만 +1
— Matt Briggs
:-) 고마워-그러나 당신이 그것을 범위에 넣고 싶다면 어떻게해야합니까 (내 대답에서 범위를 잘못 포맷했을 수도 있습니다!)
— Jennifer
2
tr에서 클래스를 사용하면 <tfoot> 내에 <td>가 있거나 <th> 대신 <td>를 사용하고 싶지 않은 경우 특히 유용합니다.
— Frank Luke
$ ( '# mytable tr'). each (function () {var customerId = $ (this) .find ( ". customerIDCell"). html ();});
— Osama khodrog
그러나 tr html도 얻으려면 우리가 할 수있는 일
— Developer
132 
$('#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;
}

​

— 안드레아스 그레 흐
소스
1
감사합니다 .jQuery를 사용하여 구문 분석하려는 문서의 마크 업을 제어 할 수 없으므로 더 유용했습니다. "td : first", "td : last"등을 사용하는 것이 큰 도움이되었습니다.
— atomules
1
eq (2)는 세 번째 행이 아닌 세 번째 열의 값을 가져옵니다.
— 라이브 사랑
코드에서 eq (2)는 무엇입니까? 2는 어떤 td 또는 tr의 인덱스입니까?
— TechnicalKalsa
@Singh 함수가 td반환 한 컬렉션 의 인덱스 2에있는 요소 find("td")입니다.
— Andreas Grech
나는 ref로 색인 2를 가진 옵션 2를 좋아한다. 나의 바이올린은 여기에서있다
— HattrickNZ
18

덜 덜한 접근법 :

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

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

— 조립식 쇠지레
소스
8 
$('#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();
  }
});
— 스트로크
소스
2
<td>가 아닌 <th>를 포함하므로 첫 번째 행을 건너 뛸 필요가 없으므로 데이터가 추출되지 않습니다.
— Andreas Grech
7

이 시도,

$(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.
    });
});
— 니힐 디 네시
소스
1
첫 번째 요소가 아닌 두 번째 요소의 eq는 0에서 시작합니다.
— Claudiu Creanga
4

해당 열에 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>
— MOH3n MOH
소스
4

이 작동합니다

$(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!";
        }
    }
});
— 데이비드
소스
2

이 시도 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>
— 모하마드
소스
2 
$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });
— 지틴
소스
2

실제 예 : http://jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});
— 가즈 멘드 혹샤
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.