Javascript onClick event in all cells

前端未结

关注

 8  2236

I\'m learning JavaScript and I\'ve not that much experience. But I\'m making a HTML table and I want to add in every table cell () a onClick event.

相关标签:

8条回答

眼角桃花

2020-12-20 17:30

I know this is a bit old, but you should use a click envent on the table and use the target value to get the cell. Instead of having a 10 x 10 table = 100 event you will have only 1.

The best thing with that method is when you add new cells you don't need to bind an event again.

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

0 讨论(0)

时光取名叫无心

2020-12-20 17:30

You can do something like that:

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

0 讨论(0)

迷失自我

2020-12-20 17:31
Just the following code will return the contained text of the clicked element. In this case the td
```
event.target.innerText
```
Example:
```
td
{
  	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>
```
Of course you can implement it into a js and attach it to the onclick event as usual. If needed you can separate the table into thead, tbody tfoot and add the onclick event to the tbody only. In this way the event will be triggered only if the user clicks on this section of the table and not when he clicks on other elements...
0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2020-12-20 17:35
Try :
```
var tds = document.getElementsByTagName("td");

for(var i in tds) tds[i].onclick = tes;
```
and a Demo...

Replace document with any other dom element that you need to find td's in.
0 讨论(0)
发布评论:

提交评论
- 加载中...
别跟我提以往

2020-12-20 17:36
There are two ways:
```
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   cells[i].onclick = function(){tes();};
}
```
and the other way using jQuery:
```
$('td').click(function(){tes();});
```
upd:

To get exactly what is needed, firstly the table must be selected, so, for the first option:
```
var table = document.getElementById('1');
var cells = table.getElementsByTagName("td"); 
...
```
and for the second, the jQ selector should be like this:
```
$('#1 td')
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2020-12-20 17:40

You might not require putting onclick event on every TD element in your table. Providing onclickevent at the table level can do the trick easily as shown in the below code snippet:

function tes(event) {
  if (event.target.nodeName == "TD") {
    alert('TD got clicked');
  }
}

  
  td {
    border: 1px solid black;
  }

<html>
  <head>
    <title>Tic-Tac-Toe</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <table id='gameBoard' width="300" height="300" onclick="tes(event);">
        <tr>
          <td data-index = "0 0"></td>
          <td data-index = "0 1"></td>
          <td data-index = "0 2"></td>
        </tr>
        <tr>
            <td data-index = "1 0"></td>
            <td data-index = "1 1"></td>
            <td data-index = "1 2"></td>
        </tr>
        <tr>
            <td data-index = "2 0"></td>
            <td data-index = "2 1"></td>
            <td data-index = "2 2"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

You can do the appropriate handling inside tes function with the help of event parameter.

0 讨论(0)

1 2 下一页