Question

我是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>

Answer 1

您的代码大部分都有效，但问题是您将html附加到td标记内但click a上，您可以通过设置{{innerHTML将其删除1}}作为选定的文本。要解决此问题，您需要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/

使用jquery在表中为td添加下拉列表

1 个答案: