2012-12-27 30 views
9

TD'lerin değerlerini bir HTML tablosuna nasıl alabilirim?Bir tablodaki HTML tablo hücresi değerlerini ona tıklayarak alın

Hücre değerine tıklarsanız Şimdi

| ID | cell 1 | cell 2 | 
| 1 | aaaa | a2a2a2 | 
| 2 | bbbb | b2b2b2 | 
| 3 | cccc | c2c2c2 | 

yani: "bbbb" Ben seçili satır bütün değerlerini almak istiyorum:

$id='2'; $cell_1='bbbb'; $cell_2='b2b2b2'; 

NOT: Ben istiyorum jQuery'yi değil javascript kullanmayı sever.

cevap

13

jQuery için javascript ve $ (event.target) .text() için event.target.innerText'i kullanabilirsiniz, jQuery, cross browser competibilities'u işlediği için tercih edilen çözümdür. Sadece javascript

Live Demo

Html

<table id="tableID" onclick="myFun(event)" border="1"> 
    <tr> 
    <td>row 1, cell 1</td> 
    <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
    <td>row 2, cell 1</td> 
    <td>row 2, cell 2</td> 
    </tr> 
</table>​ 

Javascript

kullanma

jQuery

Live Demo

Html

<table id="tableID" border="1"> 
    <tr> 
     <td>row 1, cell 1</td> 
     <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
     <td>row 2, cell 1</td> 
     <td>row 2, cell 2</td> 
    </tr> 
</table>​ 

JavaScript

$('#tableID').click(function(e){ 
    alert($(e.target).text()); // using jQuery 
}) 
kullanma

+3

javascript kullanmayı ve jquery kullanmayı sevdiğini söyledi. – RJo

+2

Teşekkürler @rjokelai, jQuery etiketine sahip ve bu sorunun bir kısmını kaçırdım. Javascript için de güncelledim. – Adil

+0

teşekkürler adamım, ama sadece hücre değerini değil, tüm çözümü seçmek için ne demek istedim? – Luke

2
var table = document.getElementById('tableID'), 
    cells = table.getElementsByTagName('td'); 

for (var i=0,len=cells.length; i<len; i++){ 
    cells[i].onclick = function(){ 
     console.log(this.innerHTML); 
     /* if you know it's going to be numeric: 
     console.log(parseInt(this.innerHTML),10); 
     */ 
    } 
} 
jquery

from here

1

kullanın kolay olacak.. Bu size yardımcı olur

$("#tableId").find("td").click(function(event){ 
    var listOfCell=$(this).siblings(); 
    for(i=0;i<listOfCell.length;i++){ 
    alert($(listOfCell[i]).text()); 
} 
}); 
2

Umut. Çapraz tarayıcı komut dosyası içerir.

<html> 
    <head> 
    <script type="text/javascript"> 
    function myFun(e){ 
    if(!e.target) 
     alert(e.srcElement.innerHTML); 
    else 
     alert(e.target.innerHTML); 
    } 
    </script> 
    </head> 
    <body> 
    <table id="tableID" onclick="myFun(event)" border="1"> 
    <tr> 
    <td>row 1, cell 1</td> 
    <td>row 1, cell 2</td> 
    </tr> 
    <tr> 
    <td>row 2, cell 1</td> 
    <td>row 2, cell 2</td> 
    </tr> 
    </table> 
    </body> 
    </html> 
+0

teşekkürler adamım çok kullanışlıdır – Luke

İlgili konular