2
我正在玩jQuery，当我点击表格中的删除链接时有一个确认框。 我设法使它工作，但是当显示框时，列正移动到左边，这并不完美。通过JS在表格中显示一个div，并且绝对位置移动表格列
我不知道它来自哪里：我的CSS，我的JS，基础CSS？... 我创建了一个JSFiddle，所以你可以检查结果。它发生在你点击删除时。
下面是在的jsfiddle代码：
$(document).ready(function(){
\t // Confirm delete
$('.delete-action').click(function() {
//Get the path of the href
var item_link = this.href;
//Select the <tr> and get the width and height
var item_section = $(this).closest('tr');
var item_section_width = item_section.outerWidth();
var item_section_height = item_section.outerHeight();
//Add css to the <tr>
item_section.css('position', 'relative');
//Display the confirm box in the <tr>
item_section.append('<div class="delete-box" style="position:absolute;width:'+item_section_width+'px;height:'+item_section_height+'px;top:0;left:0" >\n\
<div>Are you sure you want to delete this entry? <a href="'+item_link+'" class="delete-yes">Oui</a><a class="delete-no">Non</a></div>\n\
</div>');
//Proceed with delete
$('.delete-yes').click(function() {
return true;
});
//Do not delete, remove the box
$('.delete-no').click(function() {
$('.delete-box').fadeOut(function() {
$(this).remove();
});
return false;
});
return false;
});
});.delete-box {
display: flex;
padding: 0 10px;
background-color: darkgrey;
}
.delete-box div {
margin: auto;
}
.delete-box div a {
display: inline-block;
width: 60px;
padding: 5px;
margin: 0 5px;
text-align: center;
color: white;
}
.delete-box div .delete-yes {
background-color: green;
}
.delete-box div .delete-yes:hover {
background-color: darkgreen;
}
.delete-box div .delete-no {
background-color: red;
}
.delete-box div .delete-no:hover {
background-color: darkred;
}<!DOCTYPE html>
<html>
<head>
\t <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation-float.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
\t <title>Confirm box for a delete row in a Table - jQuery</title>
</head>
<body>
\t <div class="row">
\t \t <div class="large-12 columns">
\t \t \t <h1>Confirm box in a Table</h1>
\t \t \t <table>
\t \t \t \t <thead>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <th>Title</th>
\t \t \t \t \t \t <th>Last update</th>
\t \t \t \t \t \t <th>Actions</th>
\t \t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>This is a title</td>
\t \t \t \t \t \t <td>2017-07-08</td>
\t \t \t \t \t \t <td><a href=""><i class="fa fa-edit"> Edit</i></a> - <a href="" class="delete-action"><i class="fa fa-close"> Delete</i></a></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>This is a title</td>
\t \t \t \t \t \t <td>2017-07-08</td>
\t \t \t \t \t \t <td><a href=""><i class="fa fa-edit"> Edit</i></a> - <a href="" class="delete-action"><i class="fa fa-close"> Delete</i></a></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>This is a title</td>
\t \t \t \t \t \t <td>2017-07-08</td>
\t \t \t \t \t \t <td><a href=""><i class="fa fa-edit"> Edit</i></a> - <a href="" class="delete-action"><i class="fa fa-close"> Delete</i></a></td>
\t \t \t \t \t </tr>
\t \t \t \t </tbody>
\t \t \t </table> \t
\t \t </div>
\t </div>
\t <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
</body>
</html>任何想法，它可以是从哪里来的？
我看不到立柱移动。对我有好处。 –
它的工作原理...我也发现很好。 –
@AKA，似乎在Firefox中发生。这似乎是由于每个浏览器如何处理添加到TR（这是无效的HTML）的DIV。 –