使用jQuery添加TD中的下拉跌落

我是jQuery的新手。我的要求是显示表中每个TD单元格的下拉。在首次单击TD单元时，我可以满足要求，但是在单击下一个TD时，下拉菜单并未填充。请求您的帮助。预先感谢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var currenttd=null;
$(document).ready(function(){
$("td").click(function(){
$("#dropdown-content").css({"display":"block"});
$(this).append($("#dropdown-content"));
currenttd=this;
});
});
$(document).ready(function(){
$("a").click(function(){
currenttd.innerHTML=$(this).text();
});
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div>
<table border="1" style="width:100%">
  <tr>
    <td contenteditable="true">MS</td>
    <td contenteditable="true">Dhoni</td>
    <td contenteditable="true">25</td>
  </tr>
  <tr>
    <td contenteditable="true">sachin</td>
    <td contenteditable="true">tendulkar</td>
    <td contenteditable="true">28</td>
  </tr>
</table>
</div>
<div id="dropdown-content" style="display:none;position:absolute;
    background-color:#f9f9f9;
    min-width:50px;
    box-shadow:0px 8px 10px 0px rgba(0,0,0,0.2)">
    <a href="#" style="color:black;padding:12px 16px;text-decoration:none;display:block">Link1</a>
    <a href="#" style="color:black;padding:12px 16px;text-decoration:none;display:block">Link2</a>
    <a href="#" style="color:black;padding:12px 16px;text-decoration:none;display:block">Link7</a>
    <a href="#" style="color:black;padding:12px 16px;text-decoration:none;display:block">Link4</a>
  </div>
</body>

您的代码在大多数情况下起作用，但是问题是您将html附加在td标签内，但是在a的click上，您可以通过将innerHTML设置为所选文本来将其删除。为了解决这个问题，您需要clone()下拉列表并使用它将其附加到本地对象。您需要做的另一件事是检查target事件。

var currenttd=null;
$(document).ready(function(){
  $("td").click(function(e){
      if(e.target.tagName != "A")
      {
        var dropDownContent = $("#dropdown-content").clone();
        $(dropDownContent).css({"display":"block"});
        $(this).append($(dropDownContent));
        currenttd=this;   
        $("a").click(function(){
         $(currenttd).html($(this).text());
         $(dropDownContent).hide();
      });  
      }
    });   
});

在这里工作：https：//jsfiddle.net/dinomyte/co5wkj61/1/

相关内容

最新更新

热门标签：