如何在JavaScript中点击哪个td？

Question

我有下表：

<table>
  <tbody>
   <tr data-uom_id="1" id="id-742">
     <td style="width: 15%; vertical-align: middle; display: none;"><img src="left-arrow.png>"</td>
     <td style="width: 70%; text-align: left;" class="center">some text here</td>
     <td style="width: 15%; vertical-align: middle;"><img src="right-arrow.png></td>
   </tr>
  </tbody>
</table>

我的 <tr> 元素中有3个 <td> 。我可以点击哪个 <td> ？请查看附图以获得更多说明。

Answer 1

您可以尝试以下代码：

编辑 - 根据要求更改了代码

function whichOne() {
    //alert(this.id);
    document.getElementById("center").style.textAlign = this.id;
} 

document.getElementById('left').onclick = whichOne;
document.getElementById('right').onclick = whichOne;
document.getElementById('center').onclick = whichOne;

<table border="1">
  <tbody>
   <tr>
     <td style="width: 15%;" id="left">1</td>
     <td style="width: 70%; text-align: center;" id="center">2</td>
     <td style="width: 15%;" id="right">3</td>
   </tr>
  </tbody>
</table>

Answer 2

绑定点击处理程序后，您可以获得索引：

$("#id-742 td").click(function(){
   var numClicked = $(this).index()+1;
   console.log(numClicked)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
   <tr data-uom_id="1" id="id-742">
     <td style="width: 15%; vertical-align: middle; display: none;">1</td>
     <td style="width: 70%; text-align: left;" class="center">2</td>
     <td style="width: 15%; vertical-align: middle;">3</td>
   </tr>
  </tbody>
</table>

Answer 3

您可以使用以下代码获取单击单元格：

$('body').on('click', 'td', function(){
    console.log($(this).text());
});

Answer 4

使用此

$("#id-742 td").click(function(){
    //function to run when a td is clicked
});

在函数内部，您可以使用this访问点击的td。

Answer 5

这是一个纯JavaScript解决方案：

var
    td = document.getElementById("id-742").children,
    i = 0;

Array.from(td).forEach(function() {
    td[i].onclick = function(e) {
        alert(e.target.innerHTML);
    };
    i++;
});

<强>段：

var
  td = document.getElementById("id-742").children,
  i = 0;

Array.from(td).forEach(function() {
  td[i].onclick = function(e) {
    alert(e.target.innerHTML);
  };
  i++;
});

td:nth-of-type(2) {
  background-color: red;
}
td:nth-of-type(3) {
  background-color: green;
}

<table>
  <tbody>
    <tr data-uom_id="1" id="id-742">
      <td style="width: 15%; vertical-align: middle; display: none;">1</td>
      <td style="width: 70%; text-align: left;" class="center">2</td>
      <td style="width: 15%; vertical-align: middle;">3</td>
    </tr>
  </tbody>
</table>

Answer 6

这是一个JS解决方案：

function whichTd() {
   var td = document.getElementById("id-742").children;
   for (var i=0; i < td.length; i++){
      td[i].addEventListener("click", function(i) {
            alert("td"+(i+1)+"has been clicked");
      }(i),false);
   }
}        

Answer 7

您可以更轻松地在点击方法上使用jquery，并使用它来访问当前点击的td。

＆＃13;

＆＃13;

$(function(){
  
  $('tr#id-742 td').on('click',function(){
    console.log(this);
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
   <tr data-uom_id="1" id="id-742">
     <td style="width: 15%; vertical-align: middle;">1</td>
     <td style="width: 70%; text-align: left;" class="center">2</td>
     <td style="width: 15%; vertical-align: middle;">3</td>
   </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;