所有單元格中的Javascript onClick事件

Question

我正在學習JavaScript，並沒有那麼多的經驗。 但我正在製作一個HTML表格，我想在每個表格單元格（<td>）中添加一個onClick事件。

<table id="1"> 
    <tr> 
     <td onClick="tes()">1</td><td onClick="tes()">2</td> 
    </tr> 
    <tr> 
     <td onClick="tes()">3</td><td onClick="tes()">4</td> 
    </tr> 
</table> 

是否有另一種方法在每個單元中執行此事件？

Answer 1

有兩種方式：

var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    cells[i].onclick = function(){tes();}; 
} 

和使用jQuery的其他方式：

$('td').click(function(){tes();}); 

UPD：

爲了得到需要什麼，首先該表必須是因此，對於第一個選項：

var table = document.getElementById('1'); 
var cells = table.getElementsByTagName("td"); 
... 

和第二的JQ選擇應該是這樣的：

$('#1 td') 

Answer 2

你可以做這樣的事情：

var tbl = document.getElementById("1"); 
    var numRows = tbl.rows.length; 

    for (var i = 1; i < numRows; i++) { 
     var ID = tbl.rows[i].id; 
     var cells = tbl.rows[i].getElementsByTagName('td'); 
     for (var ic=0,it=cells.length;ic<it;ic++) { 
      cells[ic].OnClick = new function() {tes()}; 
     } 
    } 

Answer 3

如果你有機會到jQuery的，這樣做

$('#1 td').click(function(){ 

}); 

Answer 4

Try：

var tds = document.getElementsByTagName("td"); 

for(var i in tds) tds[i].onclick = tes; 

和Demo ...

---

更換文件與您需要找到TD的其他任何DOM元素。

Answer 5

你可以試試這個太（使用事件代表團）

window.onload = function(){ 
    document.getElementById('tbl1').onclick = function(e){ 
     var e = e || window.event; 
     var target = e.target || e.srcElement; 
     if(target.tagName.toLowerCase() == "td") { 
      alert(target.innerHTML); 
     } 
    }; 
}; 

EXAMPLE.

U唱jQuery

$(function(){ 
    $('#tbl1').on('click', 'td', function(){ 
     alert($(this).html()); 
    }); 
}); 

EXAMPLE.

Answer 6

我知道這是一個有點老，但你應該在桌子上使用點擊envent和使用目標值來獲取細胞。而不是有一個10×10表= 100事件，你將只有1.

該方法最好的事情是當你添加新的單元格，你不需要再次綁定一個事件。

$(document).ready(function() { 
 
    $('#myTable').click(function(event) { 
 
     var target = $(event.target); 
 
     $td = target.closest('td'); 
 
     
 
     $td.html(parseInt($td.html())+1); 
 
     var col = $td.index(); 
 
     var row = $td.closest('tr').index(); 
 

 
     $('#debug').prepend('<div class="debugLine">Cell at position (' + [col,row].join(',') + ') clicked!</div>'); 
 
     
 
    }); 
 
    });

td { 
 
    background-color: #555555; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    } 
 

 
#debug { 
 
    background-color: #CCC; 
 
    margin-top: 10px; 
 
    padding: 10px; 
 
    } 
 

 
#debug .debugLine { 
 
    margin: 2px 0; 
 
    padding: 1px 5px; 
 
    background-color: #EEE; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <tr> 
 
    <td>0</td>  
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>0</td>  
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>0</td>  
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    <td>0</td> 
 
    </tr> 
 
</table> 
 

 
<div id="debug"></div>

Answer 7

只是將下面的代碼將返回點擊元素包含的文本。在這種情況下，TD

event.target.innerText 

例子：

td 
 
{ 
 
    \t border: 1px solid red; 
 
}

 <table onclick="alert(event.target.innerText)"> 
 
     <tr> 
 
      <td>cell 1</td> 
 
      <td>cell 2</td> 
 
     </tr> 
 
     <tr> 
 
      <td>cell 3</td> 
 
      <td>cell 4</td> 
 
     </tr> 
 
    </table>

當然，你可以落實到一個js並將其連接到onclick事件如常。 如果需要，您可以將表分成thead，tbody tfoot，並將onclick事件添加到tbody中。通過這種方式，只有當用戶點擊表格的這一部分而不是當他點擊其他元素時纔會觸發事件...