javascript - 如果没有一个 td 有 id，确定哪个 td 元素被点击

Question

我正在尝试更新一个 <div> 使用 jQuery 的表格。我想添加一个 click 处理程序到每个 <td> ，但是 click 处理程序对于每个 <td> 都是不同的 。你怎么知道是哪个 <td> 如果没有 id 则被点击 ？

$(document).ready(function(){
  $("button").click(function(){

    $.post("controller.php",{ },
    function(data){
      var obj = JSON.parse(data);
      var object;             

      //add to a table...
      var t = "<table id='newstable' class='table table-dark table-hover'><thead><tr><th>Post Subject</th><th>Last Post</th></tr></thead><tbody>";
      for (var i = 0; i < obj.length; i++) {  // for each row
        object = obj[i];
        t += "<tr>";                        
        t += "<td colspan='2'>" + object[Object.keys(object)[0]] + "</td>";  // the property value, not the property name 
        //future lastpost td
        t += '</tr>';
      }
      t += '</tbody></table>';
      alert(t);

      $("#main-container").html(t);
    });
  });
});

我知道为了获得 id 你必须使用这个代码

$(document).ready(function() {
    $("#mycontainer").on('click', '#newtable tbody tr td', function(event) {
        alert(event.target.id);
    });
});

但是如果id怎么办？ 没有设置？

有人有什么建议吗？或指导？谢谢

我尝试对 Daniel Lizik 的建议进行编码，这就是我的想法。它不起作用。任何解决方法的想法将不胜感激。谢谢。

$(document).ready(function(){
    $("#main-container").on('click','#newstable tbody tr td',function(event){       
        var clickedTd = event.target;       
        var newsTd;

        $("#newstable td").each( function(){
            newsTd = $(this);                   
            if(clickedTd == newsTd){
                alert("they match");
            } else {
                alert("no match");
            }
        });         

    });
});

Answer 1

我认为最简单的方法是获取单元格的坐标。下面我给大家举个例子。然后您可以为每个坐标确定要采取的操作。否则，您还可以为每个元素 td 添加一个数据属性，您可以在其中传递将用于 javascript 处理的信息。

$(document).ready(function() {
    $("#mycontainer").on('click', '#newtable tbody tr td', function() {
        var colIndex = $(this).index();
        var rowIndex = $(this).parents('tr').index();
        alert(colIndex + ',' + rowIndex);
    });
});