时间戳

首页 > 解决方案 > 如果没有 td 具有 id，则确定单击了哪个 td 元素

javascript - 如果没有 td 具有 id，则确定单击了哪个 td 元素

问题描述

我正在尝试<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");
            }
        });         

    });
});

标签： javascriptjqueryhtml

解决方案

我认为最简单的方法是获取单元格的坐标。下面我给你举个例子。然后，您可以为每个坐标确定要采取的操作。否则，您还可以为每个元素添加一个数据属性，您可以在其中传递将用于 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);
    });
});

推荐阅读