In this article, we will explore the process of building an editable table utilizing JavaScript. We will start with a fundamental overview of JavaScript programming concepts. Following that, we will delve into this topic through various examples for better comprehension.
What is JavaScript?
JavaScript, often referred to as JS, is a versatile programming language that is dynamic in nature. It is extensively utilized for web development, the creation of web applications, game development, and various other applications. This language enables developers to incorporate dynamic functionalities into web pages, capabilities that cannot be achieved solely with HTML and CSS.
It is a high-level programming language that is frequently compiled just-in-time and supports multiple paradigms. The language features a curly-bracket syntax { }, employs dynamic typing, utilizes prototype-based object orientation, and treats functions as first-class citizens.
What do you mean by JavaScript editable table?
Once you have established a table in JavaScript, you have the ability to insert and merge both rows and columns, as well as format the table by modifying the widths of table cells, altering colors, and adjusting alignment. The contenteditable attribute can be applied to the cells, rows, or the entire table to enable editing functionality within the table.
Let’s explore a range of examples showcasing editable tables in JavaScript.
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
body{
background-color: rgb(63,72,83);
font-family: sans-serif;
color: rgb(220,220,220);
overflow-x: hidden;
}
tr:first-child { color: #FB667A; }
td:hover {
color: white;
font-weight: bold;
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 400;
font-size: 40px;
color: white;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.table {
width: 100%;
thead {
th {
padding: 10px 10px;
background: #00adee;
font-size: 25px;
text-transform: uppercase;
vertical-align: top;
color: #1D4A5A;
font-weight: normal;
text-align: left;
}
}
tbody {
tr {
td {
padding: 10px;
background: #f2f2f2;
font-size: 14px;
}
}
}
}
.add {
outline: none;
background: none;
border: none;
}
.edit {
outline: none;
background: none;
border: none;
}
.save {
outline: none;
background: none;
border: none;
}
.delete {
outline: none;
background: none;
border: none;
}
.edit {
padding: 5px 10px;
cursor: pointer;
}
.save {
padding: 5px 10px;
cursor: pointer;
}
.delete {
padding: 5px 10px;
cursor: pointer;
}
.add {
float: right;
background: transparent;
border: 1px solid black;
color: black;
font-size: 13px;
padding: 0;
padding: 3px 5px;
cursor: pointer;
&:hover {
background: #ffffff;
color: #00adee;
}
}
.save {
display: none;
background: #32AD60;
color: #ffffff;
&:hover {
background: darken(#32AD60, 10%);
}
}
.edit {
background: #2199e8;
color: #ffffff;
&:hover {
background: darken(#2199e8, 10%);
}
}
.delete {
background: #EC5840;
color: #ffffff;
&:hover {
background: darken(#EC5840, 10%);
}
}
</style>
<body>
<table class="table data">
<h1> Example </h1>
<thead>
<tr>
<th> Name </th>
<th> Email </th>
<th> Number </th>
</tr>
</thead>
<tbody>
<tr>
<td class="data"> John Doe </td>
<td class="data"> johndoe@john.com </td>
<td class="data"> 666-666-666 </td>
<td>
<button class="save"> Save </button>
<button class="edit"> Edit </button>
<button class="delete"> Delete </button>
</td>
</tr>
<tr>
<td class="data"> John Doe </td>
<td class="data"> johndoe@john.com </td>
<td class="data"> 666-666-666 </td>
<td>
<button class="save"> Save </button>
<button class="edit"> Edit </button>
<button class="delete"> Delete </button>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="data"> John Doe </td>
<td class="data"> johndoe@john.com </td>
<td class="data"> 666-666-666 </td>
<td>
<button class="save"> Save </button>
<button class="edit"> Edit </button>
<button class="delete"> Delete </button>
</td>
</tr>
<tr>
<td class="data"> John Doe </td>
<td class="data"> johndoe@john.com </td>
<td class="data"> 666-666-666 </td>
<td>
<button class="save"> Save </button>
<button class="edit"> Edit </button>
<button class="delete"> Delete </button>
</td>
</tr>
</tbody>
</table>
<script src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"> </script>
<script>
$(document).on('click', '.edit', function() {
$(this).parent().siblings('td.data').each(function() {
var content = $(this).html();
$(this).html('<input value="' + content + '" />');
});
$(this).siblings('.save').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$(document).on('click', '.save', function() {
$('input').each(function() {
var content = $(this).val();
$(this).html(content);
$(this).contents().unwrap();
});
$(this).siblings('.edit').show();
$(this).siblings('.delete').show();
$(this).hide();
});
$(document).on('click', '.delete', function() {
$(this).parents('tr').remove();
});
$('.add').click(function() {
$(this).parents('table').append('<tr><td class="data"></td><td class="data"></td><td class="data"></td><td><button class="save">Save</button><button class="edit">Edit</button> <button class="delete">Delete</button></td></tr>');
});
</script>
</body>
</html>
Explanation:
In the preceding example, we utilized JavaScript to modify the data within the table. To enable editing of the table cells, simply click on the desired cell. It should transition into an "editable" state (a textarea will be displayed inside). This allows us to alter the contents of the table.
Output:
Following is the output of this example:
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
body {
font-size: 0.75em;
}
table {
border-spacing: 10px;
}
tr > th {
text-align: right;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color: #D5DDE5;;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 24px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color: #666B85;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #4E5066;
color: #FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #4E5066;
}
tr:last-child td:first-child {
border-bottom-left-radius: 3px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 3px;
}
td:last-child {
border-right: 0px;
}
td {
background: #FFFFFF;
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
</style>
<body>
<h1> Example </h1>
<table summary="Editable table with datasets ordered in columns" class="table-fill">
<tbody>
<tr>
<th scope="col"> Month </th>
<th scope="col"> Sales </th>
</tr>
<tr>
<th scope="row"> January </th>
<td> 16000 </td>
</tr>
<tr>
<th scope="row"> February </th>
<td> 10000</td>
</tr>
<tr>
<th scope="row"> March </th>
<td> 20000 </td>
</tr>
<tr>
<th scope="row"> April </th>
<td> 7300 </td>
</tr>
<tr>
<th scope="row"> May </th>
<td> 12000 </td>
</tr>
<tr>
<th scope="row"> June </th>
<td> 1099 </td>
</tr>
</tbody>
</table>
<br />
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>
<script>
var table = document.querySelector('table');
var dataCells = table.querySelectorAll('tr > td');
var rows = table.querySelectorAll('tr');
var code = document.querySelector('code');
var resetButton = document.querySelector('.reset');
rows = Array.prototype.slice.call(rows, 1);
var ncols = rows[0].children.length - 1;
var initialData = {0:[1,2,3,4,5],1:[6,7,8,9,10],2:[11,12,13,14,15]};
function parseTable () {
var d = {};
Array.prototype.forEach.call(rows, function (row, i) {
var rowCells = row.querySelectorAll('td');
return Array.prototype.map.call(rowCells, function (cell, j) {
if (!d[j]) d[j] = [];
d[j].push(parseInt(cell.textContent, 10));
});
});
return d;
}
function setTableData (data) {
Array.prototype.forEach.call(rows, function (row, i) {
var rowCells = row.querySelectorAll('td');
return Array.prototype.map.call(rowCells, function (cell, j) {
cell.textContent = initialData[j][i];
});
});
}
Array.prototype.forEach.call(dataCells, function (cell) {
cell.contentEditable = true;
});
table.addEventListener('keyup', function (e) {
if (e.target.tagName === 'TD') {
setTimeout(function () {
code.innerText = JSON.stringify( parseTable() );
}, 0);
}
});
</script>
</body>
</html>
Explanation:
In the preceding illustration, we have modified the table data utilizing JavaScript. To enable editing of the table cells, simply click on the desired cell. Upon doing so, the cell will transition to an "editable" state (a textarea will be displayed within). This allows us to alter the content within the table.
Output:
Following is the output of this example:
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
@import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}
</style>
<body>
<div class="container">
<h1> JavaScript Editable Table </h1>
<div id="table" class="table-editable">
<table class="table">
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
<th> Marks </th>
</tr>
<tr>
<td contenteditable="true"> Ram </td>
<td contenteditable="true"> 1 </td>
<td contenteditable="true"> BA </td>
<td contenteditable="true"> 48 </td>
</tr>
<tr>
<td contenteditable="true"> Rama </td>
<td contenteditable="true"> 10 </td>
<td contenteditable="true"> BSC </td>
<td contenteditable="true"> 40 </td>
</tr>
<tr>
<td contenteditable="true"> sham </td>
<td contenteditable="true"> 8 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 34 </td>
</tr>
<tr>
<td contenteditable="true"> shama </td>
<td contenteditable="true"> 3 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 30 </td>
</tr>
</table>
</div>
</div>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>
<script>
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function () {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function () {
$(this).parents('tr').detach();
});
$('.table-up').click(function () {
var $row = $(this).parents('tr');
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$('.table-down').click(function () {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function () {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
$($rows.shift()).find('th:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
$rows.each(function () {
var $td = $(this).find('td');
var h = {};
headers.forEach(function (header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
});
</script>
</body>
</html>
Explanation:
In the preceding example, we have modified the table information utilizing JavaScript. To enable editing of table cells, simply click on the desired cell. The cell will transition into an "editable" state (a textarea will be displayed within it). This allows us to alter the content of the table as needed.
Output:
Following is the output of this example: