jqueryを使用してテーブルのtdにドロップダウンを追加する

jqueryを初めて使用しています。私の要件は、テーブルの各tdセルのドロップダウンを表示することです。一方、tdセルの最初のクリックでは、要件を満たすことができましたが、次のtdをクリックしている間は、ドロップダウンは入力されません。あなたの助けを求める。事前のおかげでjqueryを使用してテーブルの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>

出典

2016-06-23 vinnus

ドロップダウンは、任意の ''上記クリックで私のためにポップアップしているようです。それはあなたのためではありませんか？また、各ドロップダウンに同じリンクが必要ですか？ – blubberbo

@blubberboドロップダウンがポップアップしていますが、そこから値を選択しませんでした。私がドロップダウンから値を選択した場合、残りのtdに対して、ドロップダウンはポップアップしません。ありがとうございます – vinnus

あなたのコードは、ほとんどの部分で動作しますが、問題は、あなたがtdタグ内が、clickaの上のHTMLを追加することで、あなたは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/

出典

2016-06-23 17:56:36 DinoMyte

コード@DinoMyteありがとうございます。しかし、tdをクリックして値を選択せずに次のtdをクリックすると、直前のtdのドロップダウンが閉じない。私たちが目標イベントをチェックする必要がある理由を教えてください。私は、TDとして空の値を加えた場合 – vinnus

こんにちは@DinoMyte、 iはスニペットの下に追加し、それはtdのworking.since細胞は、（定義されていない場合、その後も場合（NULL！= currenttd）{ 可視依然としてドロップダウン、編集可能です！ = currenttd.querySelectorAll（ "＃dropdown-content"）[0] .style.display = "none"; } } – vinnus

jqueryを使用してテーブルのtdにドロップダウンを追加する

答えて

関連する問題