| Name | Value | ||
|---|---|---|---|
| Lorem | Ipsum |
Source Code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable
Table</title>
<!-- CSS
only -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
.g-remove{
color:red;
cursor:pointer;
}
.g-move-up {
cursor: pointer;
color:green;
}
.g-move-down {
cursor: pointer;
font-size: large;
color: green;
}
</style>
<script>
function addrow() {
$("#gtable").append("<tr><td
contenteditable=\"true\">Lorem</td><td
contenteditable=\"true\">ipsum</td><td> <i
class=\"g-remove fa
fa-close\"></i></td><td><i class=\"g-move-up
fa fa-angle-up\"></i><i class=\"g-move-down fa
fa-angle-down\"></i></td></tr>");
}
$(document).ready(function () {
$("#gtable").on('click', '.g-remove', function () {
$(this).closest('tr').remove();
});
$("#gtable").on('click', '.g-move-up', function () {
var $row = $(this).parents('tr');
if ($row.index() === 1) return; // Don't go above the header
$row.prev().before($row.get(0));
});
$("#gtable").on('click', '.g-move-down', function () {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
});
</script>
</head>
<body>
<div class="container">
<input type="button" value="Add Row" onclick="addrow()"/>
<table class="table" id="gtable">
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
<th></th>
</tr>
<tr>
<td contenteditable="true">Lorem</td>
<td contenteditable="true">Ipsum</td>
<td>
<i class="g-remove fa
fa-close"></i>
</td>
<td>
<i class="g-move-up fa
fa-angle-up"></i>
<i class="g-move-down fa
fa-angle-down"></i>
</td>
</tr>
</table>
</div>
</body>
</html>
No comments:
Post a Comment