刪除鼠標下一個td輸入事件

我想刪除td的下一個td的mouseenter。但是我的代碼刪除了第一次出現的鼠標td和當前鼠標懸停td。我的代碼在這裏。這段代碼有什麼錯誤？刪除鼠標下一個td輸入事件

$(document).on("mouseenter ", "td.content" , function(e) {  
     var ParentTdRemove = $(this).closest('td');   
     if($(this).hasClass("content")){ 
      $('#addexpandtd').show(); 
      var top_pos = $(this).position().top; 
      var left_post = $(this).position().left;  
      $('#addexpandtd').css('position', 'absolute'); 
      top_pos = top_pos-25; 
      $('#addexpandtd').css('top',top_pos); 
      $('#addexpandtd').css('left', left_post); 

      $(document).on("click", ".removetbletdimg" , function(e) { 
        ParentTdRemove.remove(); 
        return false; 
      }); 

      $(document).on("click", ".expandtdimg" , function(e) { 
       if(ParentTdRemove.next('td').is('.addtd')==false){ 
        ParentTdRemove.next('td').remove(); 
       } 
      }); 
     } 

}).on('mouseleave',"td.content" , function() { 
$("#addexpandtd").hide(); 
});

我的HTML是

<table class="dynmictable"> 
<tbody> 
    <tr> 
     <td class="ui-droppable ui-sortable content tbledata"></td> 
     <td class="ui-droppable ui-sortable content tbledata"></td> 
     <td class="ui-droppable ui-sortable content tbledata"></td> 
     <td class="addtd"><img src="images/plus_td.png" class="" id="addtditem"></td> 
    </tr> 
</tbody> 
</table> 

<div id="addexpandtd" style="display: block; position: absolute; top: 232.375px; left: 381.25px;"> 
    <img src="images/expand.png" class="expandtdimg"> 
    <img src="images/Close-icon.png" class="removetbletdimg" id=""> 
</div>

來源

2014-12-23 vel

發表您的HTML作爲welll –

是'addexpandtd'下一TD ......如果有，有多個elments具有相同的ID –

你可能想未來（）而不是最接近的dom – mplungjan

closest用來在DOM樹，一邊嵌套表你是不是在這種情況下搜索的時候，我想你想的當前td。

所以，你可以在當前元素上設置一個類，使用該類搜索當前元素或其上的按鈕點擊下一步。

這樣就可以避免使用ParentTdRemove並且可以附加一個單擊處理程序，不以每鼠標懸停綁定。

代碼：

$(document).on("mouseenter ", "td.content", function (e) {  
    if ($(this).hasClass("content")) { 
     $('#addexpandtd').show(); 
     var top_pos = $(this).position().top; 
     var left_post = $(this).position().left; 
     $('#addexpandtd').css('position', 'absolute'); 
     top_pos = top_pos - 25; 
     $('#addexpandtd').css('top', top_pos); 
     $('#addexpandtd').css('left', left_post); 

     $('td.content').removeClass('current'); 
     $(this).addClass('current'); 
    } 

}).on('mouseleave', "td.content", function() { 
    $(this).removeClass('current'); 
    $("#addexpandtd").hide(); 
}); 

$(document).on("click", ".removetbletdimg", function (e) { 
    $('td.content.current').remove(); 
    return false; 
}); 

$(document).on("click", ".expandtdimg", function (e) { 
    if ($('td.content.current').next('td').is('.addtd') == false) { 
     $('td.content.current').next('td').remove(); 
    } 
});

演示：http://jsfiddle.net/f694s1bb/

來源

2014-12-23 07:56:29

謝謝@IvinvinDominin。它的工作。 – vel

刪除鼠標下一個td輸入事件

回答

相關問題