使用鼠标移动事件获取表格ID

我已经使用拖放表格行元素创建了一个应用程序。在那我想获得被丢弃的元素ID（即，我丢弃的表ID）。我尝试了鼠标事件。但我无法得到正确的答案。使用鼠标移动事件获取表格ID

我正在使用tablednd插件。

我有两个表。在那里，我将把tr从一张桌子拖放到另一张桌子上。
因为我想要删除表ID。

<script src="<?php echo base_url(); ?>assets/js/drag/jquery.tablednd_0_5.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".tbl_repeat tbody").tableDnD({ 
      onDrop: function (table, row) { 
       var orders = $.tableDnD.serialize(); 
       //console.log(orders); 
       // alert(table.id); 
       //alert($('td').closest('table')[2].id); 
       //$.post('<?php echo base_url(); ?>dashboard/order_update', { orders : orders }); 
      } 
     }); 
</script>

我用这个函数来获取删除的表ID：

document.body.onmouseup = function (e) { 
    e = e || window.event; 
    var elementId = (e.target || e.srcElement).id; 
    // call your re-create function 
    recreate(elementId); 
    // ... 
} 

function recreate(id) { 
    alert(id); 
}

HTML

<table id="tbl1" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;"> 
<tbody id="hai1"> 
<tr> 
</tr> 
</tbody> 
    </table> 

<table id="tbl2" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;"> 
<tbody id="hai1"> 
<tr> 
</tr> 
</tbody> 
    </table> 

<table id="tbl3" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;"> 
<tbody id="hai1"> 
<tr> 
</tr> 
</tbody> 
    </table>

在此先感谢。

来源

2017-06-15 Karthick Anbazhagan

Karthick你能不能显示你的完整代码 –

我已经从https://gist.github.com/chucktrukk/655016下载插件，我已经显示了我的功能，从上面的代码 –

karthick我问你的html部分 –

请参阅如果你从这个示例代码中得到一些帮助


 
    
 
    $(document).ready(function() { 
 
      $('.ClsTBL').hover(
 
       function() { console.log('hovering on', $(this).attr('id')); }, // You can add your functions 
 
       function() { } 
 
     ); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head></head> 
 
<body> 
 
<div> 
 
      <table id="MyTbl1" class="ClsTBL"> 
 
       <tr> 
 
        <td>Test</td> 
 
        <td>Test 1</td> 
 
       </tr> 
 
      </table> 
 

 
      <table id="MyTbl2" class="ClsTBL"> 
 
       <tr> 
 
        <td>Test</td> 
 
        <td>Test 1</td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     </body> 
 
     </html>

来源

2017-06-15 10:15:51

此代码可能会帮助您 –

var TableID =“”; （'。ClsTBL'）。hover（TableID = $（this）.attr（'id'））; $（“。tbl_repeat tbody”）。$（document.ready.txt） tableDnD（{ onDrop：功能（表，列）{ 警报（表格ID）; } }）; }）; –

您可以使用此

$(".tbl_repeat tbody").tableDnD({ 
      onDrop: function (table, row) { 
       var tableId = $(this).parents('table').attr('id'); 
       console.log(tableId); 
       var orders = $.tableDnD.serialize(); 

      } 
     });

来源

2017-06-15 10:24:04 hasan

我有更多的两个表。我想获取表格ID在哪里tr的丢弃 –

表的dnd在jQuery中的工作？我的意思是你添加console.log那里 – hasan

我已经更新了我的回答 – hasan

karthick尝试这样

onDrop: function (table, row) { 
      var orders = $.tableDnD.serialize(); 
      var t=$(table); 
      console.log(t.attr('id')); 
      //console.log(orders); 
      // alert(table.id); 
      //alert($('td').closest('table')[2].id); 
      //$.post('<?php echo base_url(); ?>dashboard/order_update', { orders : orders }); 
     }

来源

2017-06-15 10:34:34

从上面的答案我们只会拖动表ID。但我想要删除表的ID –

var TableID= ""; 

    $(document).ready(function() { 
     $('.ClsTBL').hover(TableID = $(this).attr('id')); 

     $(".tbl_repeat tbody").tableDnD({ 
      onDrop: function (table, row) { 
       alert(TableID); 

      } 
     }); 

    });

来源

2017-06-15 11:11:10

虽然此代码可能会回答问题，但提供有关如何解决问题和/或为何解决问题的其他上下文会提高答案的长期价值。 – Badacadabra

使用鼠标移动事件获取表格ID

回答

相关问题