使用鼠标移动事件获取表格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>
在此先感谢。
请参阅如果你从这个示例代码中得到一些帮助
$(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>
此代码可能会帮助您 –
var TableID =“”; ('。ClsTBL')。hover(TableID = $(this).attr('id')); $(“。tbl_repeat tbody”)。$(document.ready.txt) tableDnD({ onDrop:功能(表,列){ 警报(表格ID); } }); }); –
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 });
}
从上面的答案我们只会拖动表ID。但我想要删除表的ID –
var TableID= "";
$(document).ready(function() {
$('.ClsTBL').hover(TableID = $(this).attr('id'));
$(".tbl_repeat tbody").tableDnD({
onDrop: function (table, row) {
alert(TableID);
}
});
});
虽然此代码可能会回答问题,但提供有关如何解决问题和/或为何解决问题的其他上下文会提高答案的长期价值。 – Badacadabra
Karthick你能不能显示你的完整代码 –
我已经从https://gist.github.com/chucktrukk/655016下载插件,我已经显示了我的功能,从上面的代码 –
karthick我问你的html部分 –