2
テーブル内の削除リンクをクリックしたときに確認ボックスを表示するためにjQueryを使用しています。 私はそれを動作させることができましたが、ボックスが表示されているとき、列は完全ではない左側に移動しています。JSを介してテーブル内にdivを表示し、絶対位置でテーブルの列を移動します。
私のCSS、JS、Foundation CSSはどこですか？ 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>それから来ることができる任意のアイデア：
ここJSFiddleのコードですか？
私が見ることができないコラム移動：ここでの結果です。私のために良い作品。 –
それは働く...私はまた良いことが分かった。 –
@AKAは、Firefoxで起こっているようです。そして、それぞれのブラウズがどのようにDIVをTR（これは有効なhtmlではない）に追加するのかに起因するようです。 –