使用鼠標移動事件獲取表格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

回答

相關問題