Cách chọn <td> trong số <table> bằng javascript?

Tôi biết đây là câu hỏi rất dễ, nhưng tôi không thể tìm thấy câu trả lời ở đâu cả. Chỉ có câu trả lời là những câu trả lời bằng jQuery, chứ không phải JS thuần túy. Tôi đã thử mã dưới đây và nó không hoạt động. Tôi không biết tại sao.Cách chọn <td> trong số <table> bằng javascript?

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.getElementsByTagName("td");

này cũng không hoạt động:

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.childNodes;

Tôi đang làm gì sai? Cách tốt nhất để làm việc này là gì?

EDIT: Tôi thực sự có id của bảng bảng. Preety ngớ ngẩn tôi biết. Đây là giao diện HTML của tôi:

<table id="table"> 
      <tr> 
       <td id="c1">1</td> 
       <td id="c2">2</td> 
       <td id="c3">3</td> 
      </tr> 
      <tr> 
       <td id="b1">4</td> 
       <td id="b2">5</td> 
       <td id="b3">6</td> 
      </tr> 
      <tr> 
       <td id="a1">7</td> 
       <td id="a2">8</td> 
       <td id="a3">9</td> 
      </tr> 
</table>

Để giải thích ý định của mình rõ ràng hơn> Tôi muốn tạo trò chơi toe tic. Để bắt đầu, tôi muốn nhấp vào < td> và có thể trích xuất id của số đó < td> cụ thể. Làm thế nào để làm điều đó hiệu quả nhất?

Nguồn

2011-12-14 oFca

Cách tốt nhất là sử dụng thư viện, như jQuery –

Ý bạn là gì bởi "không hoạt động"? Bạn có thực sự có một phần tử '

' có "bảng" làm thuộc tính "id" của nó không? – Pointy

@Shvelo 'Chỉ có câu trả lời là những câu trả lời bằng jQuery' - anh ấy đang tìm kiếm một thứ JavaScript thuần túy. – Pointy

Trả lời

Điều này d = t.getElementsByTagName("tr") và điều này r = d.getElementsByTagName("td") đều là arrays. getElementsByTagName trả về một bộ sưu tập các phần tử ngay cả khi chỉ có một phần tử được tìm thấy trong trận đấu của bạn.

Vì vậy, bạn phải sử dụng như thế này:

var t = document.getElementById("table"), // This have to be the ID of your table, not the tag 
    d = t.getElementsByTagName("tr")[0], 
    r = d.getElementsByTagName("td")[0];

Đặt chỉ số của mảng như bạn muốn truy cập các đối tượng.

Lưu ý rằng getElementById là tên cho biết chỉ nhận được phần tử có id phù hợp, vì vậy bảng của bạn phải giống như <table id='table'> và getElementsByTagName được theo thẻ.

EDIT:

Vâng, tiếp tục bài này, tôi nghĩ bạn có thể làm điều này:

var t = document.getElementById("table"); 
var trs = t.getElementsByTagName("tr"); 
vat tds = null; 

for (var i=0; i<trs.length; i++) 
{ 
    tds = trs[i].getElementsByTagName("td"); 
    for (var n=0; n<trs.length;n++) 
    { 
     tds[n].onclick=function() { alert(this.id); } 
    } 
}

Hãy thử nó!

Nguồn

2011-12-14 16:49:05

+1, nhưng không ** hoàn toàn ** như thế này, bởi vì có thể có nhiều hơn một 'tr' và nhiều hơn một' td' – Joe

Để trở thành hình chữ nhật, chúng không phải là mảng thực, mà là 'NodeList's . – BoltClock

@MikeStewart tất nhiên, đây là vì anh ấy học cách nó hoạt động, sau đó anh ta áp dụng một vòng lặp hoặc bất cứ điều gì anh ta cần. –

thử document.querySelectorAll("#table td");

Nguồn

2011-12-14 16:49:34

Có rất nhiều cách để thực hiện điều này, và đây là nhưng một trong số họ.

$("table").find("tbody td").eq(0).children().first()

Nguồn

2011-12-14 16:49:53

var t = document.getElementById("table"), 
    d = t.getElementsByTagName("tr"), 
    r = d.getElementsByTagName("td");

nhu cầu là:

var t = document.getElementById("table"), 
    tableRows = t.getElementsByTagName("tr"), 
    r = [], i, len, tds, j, jlen; 

for (i =0, len = tableRows.length; i<len; i++) { 
    tds = tableRows[i].getElementsByTagName('td'); 
    for(j = 0, jlen = tds.length; j < jlen; j++) { 
     r.push(tds[j]); 
    } 
}

Vì getElementsByTagName lợi nhuận một NodeList một cấu trúc mảng giống như. Vì vậy, bạn cần phải lặp qua các nút trả về và sau đó điền bạn r như trên.

Nguồn

2011-12-14 16:49:56 Joe

Có bắt đầu xuất hiện một số câu trả lời giả định bạn muốn nhận tất cả các phần tử <td> từ #table. Nếu vậy, cách trình duyệt chéo đơn giản nhất cách thực hiện điều này là document.getElementById('table').getElementsByTagName('td'). Điều này hoạt động bởi vì getElementsByTagName không chỉ trả lại con ngay lập tức. Không có vòng lặp là cần thiết.

Nguồn

2011-12-14 16:53:13 duri

Ngoài ra còn có các thành viên rows và cells;

var t = document.getElementById("tbl"); 
for (var r = 0; r < t.rows.length; r++) { 
    for (var c = 0; c < t.rows[r].cells.length; c++) { 
     alert(t.rows[r].cells[c].innerHTML) 
    } 
}

Nguồn

2011-12-14 16:55:32

Các vấn đề liên quan