Làm thế nào để có được một giá trị ô bảng bằng jQuery?

213

Tôi đang cố gắng tìm ra cách lấy giá trị của ô bảng cho mỗi hàng bằng jQuery.

Bảng của tôi trông như thế này:

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

Về cơ bản tôi muốn lặp qua bảng và nhận giá trị của Customer Idcột cho mỗi hàng.

Trong đoạn mã dưới đây tôi đã làm việc rằng tôi cần phải làm điều này để khiến nó lặp qua từng hàng, nhưng tôi không chắc làm thế nào để lấy giá trị của ô đầu tiên trong hàng.

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

jquery

— Sean Taylor
nguồn

4

Dưới đây là hướng dẫn đầy đủ với bản demo trực tiếp về cách lấy bảng giá trị TD của bảng mã.info/jquery

— Satinder singh

306

Nếu bạn có thể, có thể đáng để sử dụng một thuộc tính lớp trên TD có chứa ID khách hàng để bạn có thể viết:

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

Về cơ bản, điều này giống như các giải pháp khác (có thể do tôi đã sao chép), nhưng có một lợi thế là bạn sẽ không cần thay đổi cấu trúc mã của mình nếu bạn di chuyển xung quanh các cột hoặc thậm chí đặt ID khách hàng vào <span>, miễn là bạn giữ thuộc tính lớp với nó.

Nhân tiện, tôi nghĩ bạn có thể làm điều đó trong một bộ chọn:

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

Nếu điều đó làm cho mọi thứ dễ dàng hơn.

— Jennifer
nguồn

4

Tôi sẽ nói $ ('# mytable td.customerIDCell'). Mỗi (hàm () {alert ($ (this) .html ());}); nhưng +1

— Matt Briggs

:-) cảm ơn - nhưng nếu bạn muốn đặt nó vào một khoảng (tôi có thể đã định dạng sai khoảng đó trong câu trả lời của mình!)

— Jennifer

2

Sử dụng lớp trên tr đặc biệt hữu ích nếu bạn tình cờ có <td> trong <t feet> (hoặc đang sử dụng <td> thay vì <th>) và không muốn những thứ đó.

— Frank Luke

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

— Osama khodrog

nhưng nếu tôi cũng muốn nhận được tr html thì chúng ta có thể làm gì

— Nhà phát triển

132

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

Những gì bạn đang làm là lặp qua tất cả các trs trong bảng, tìm td đầu tiên trong tr hiện tại trong vòng lặp và trích xuất html bên trong của nó.

Để chọn một ô cụ thể, bạn có thể tham chiếu chúng với một chỉ mục:

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

Trong đoạn mã trên, tôi sẽ lấy giá trị của hàng thứ ba (chỉ mục dựa trên zero, vì vậy chỉ mục ô đầu tiên sẽ là 0)

Đây là cách bạn có thể làm mà không cần 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;
}

Hay nói, là một tài tài của, qua, qua, qua một khác, qua giữ, qua một tài khác

— Andreas Grech
nguồn

1

Cảm ơn, điều này hữu ích hơn với tôi vì tôi không kiểm soát được việc đánh dấu tài liệu mà tôi muốn phân tích bằng jQuery. Vì vậy, việc có thể sử dụng "td: first", "td: last", v.v ... là một sự trợ giúp tuyệt vời.

— nguyên tử

1

eq (2) sẽ nhận giá trị của cột thứ ba, không phải hàng thứ ba.

— sống tình yêu

Eq (2) trong mã của bạn là gì? Ý tôi là 2 là chỉ số của td hay tr?

— TechnicalKalsa

@Singh Phần tử tại chỉ mục 2 của tdbộ sưu tập được find("td")hàm trả về .

— Andreas Grech

Tôi thích tùy chọn 2 với chỉ số là ref, fiddle của tôi ở đây

— HattrickNZ

18

một cách tiếp cận ít gây tranh cãi:

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

điều này rõ ràng có thể được thay đổi để làm việc với các ô không phải là đầu tiên.

— Jimmy
nguồn

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();
  }
});

— Strelok
nguồn

2

Không cần phải bỏ qua hàng đầu tiên, vì nó chứa <th>, không phải <td>, vì vậy dữ liệu của họ sẽ không được trích xuất

— Andreas Grech

7

Thử cái này,

$(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.
    });
});

— Nikhil Dinesh
nguồn

1

của phần tử thứ hai, không phải phần tử thứ nhất, eq bắt đầu từ 0

— Claudiu Creanga

4

Bạn không sử dụng id cho cột đó? nói rằng:

    <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
nguồn

4

Những công việc này

$(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!";
        }
    }
});

— David
nguồn

2

thử cái này :

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

— mohammad
nguồn

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

— jithin
nguồn

2

Một ví dụ hoạt động: 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");
});
});

— Công báo Hoxha
nguồn