通過單擊獲取行表格中的HTML表格單元格值

即

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

所以，現在如果我點擊單元格值：「BBBB」我想選擇的行中的所有值：

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

注：我會喜歡使用JavaScript而不是jQuery。

來源

2012-12-27 Luke

對於javascript，您可以使用event.target.innerText，對於jQuery可以使用$（event.target）.text（），因爲jQuery處理cross browser competibilities，所以jQuery是首選解決方案。

使用只有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

function myFun(e){ 
    alert(e.target.innerText); //current cell 
    alert(e.target.parentNode.innerText); //Current row. 
}

使用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 
})

來源

2012-12-27 08:50:05 Adil

他說他想使用JavaScript而不是jQuery。 – RJo

謝謝@rjokelai，他有jQuery標記，我錯過了那部分問題。我也更新了JavaScript。 – Adil

謝謝你，但我的意思是選擇整個行不只是單元格的價值，任何解決方案？ – Luke

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); 
     */ 
    } 
}

from here

來源

2012-12-27 08:54:08

使用jQuery的會很容易..

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

來源

2012-12-27 08:54:22 Rajesh

希望這可以幫助你。它包含跨瀏覽器腳本。

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

來源

2012-12-28 09:41:01 AmGates

謝謝，這是非常有用的 – Luke

通過單擊獲取行表格中的HTML表格單元格值

回答

相關問題