HTML5 Editable Table

Developer
Ash Blue
Size
3,252 Kb
Views
506,000
  1. HTML5 Editable Table Previews
  2. HTML5 Editable Table HTML Codes
  3. HTML5 Editable Table CSS Codes
  4. HTML5 Editable Table JS Codes

How do I make an html5 editable table?

Create and edit an HTML5 table without the use of a library. Uses HTML5's contenteditable and minimal JavaScript.. What is a html5 editable table? How do you make a html5 editable table? This script and codes were developed by Ash Blue on 18 July 2022, Monday.

HTML5 Editable Table Previews
IQ Test

HTML5 Editable Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Editable Table</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>HTML5 Editable Table</h1> <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p> <ul> <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> <li>Simple / powerful features such as add row, remove row, move row up/down.</li> </ul> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <tr> <th>Name</th> <th>Value</th> <th></th> <th></th> </tr> <tr> <td contenteditable="true">Stir Fry</td> <td contenteditable="true">stir-fry</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <!-- This is our clonable table line --> <tr class="hide"> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <p id="export"></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML5 Editable Table - Script Codes CSS Codes

.table-editable { position: relative;
}
.table-editable .glyphicon { font-size: 20px;
}
.table-remove { color: #700; cursor: pointer;
}
.table-remove:hover { color: #f00;
}
.table-up, .table-down { color: #007; cursor: pointer;
}
.table-up:hover, .table-down:hover { color: #00f;
}
.table-add { color: #070; cursor: pointer; position: absolute; top: 8px; right: 0;
}
.table-add:hover { color: #0b0;
}

HTML5 Editable Table - Script Codes JS Codes

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; // Don't go above the header $row.prev().before($row.get(0));
});
$('.table-down').click(function () { var $row = $(this).parents('tr'); $row.next().after($row.get(0));
});
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var h = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { h[header] = $td.eq(i).text(); }); data.push(h); }); // Output the result $EXPORT.text(JSON.stringify(data));
});
HTML5 Editable Table - Script Codes
HTML5 Editable Table - Script Codes
Home Page Home
Developer Ash Blue
Username ashblue
Uploaded July 18, 2022
Rating 4.5
Size 3,252 Kb
Views 506,000
Do you need developer help for HTML5 Editable Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash Blue (ashblue) Script Codes
Name
Responsive Gallery Grid Layout
Overflowing Gallery
CSS Arrows
HTML5 Canvas Text Wrap Test
HTML5 Canvas Scrollbar
Flow Chart Prototype
JavaScript Anagram Generator Alpha
Loader Example
JavaScript Anagram Algorithm Explanation
CSS Sprite Animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!