CRUD Table with JSON

Developer
Takane Ichinose
Size
3,486 Kb
Views
14,168
  1. CRUD Table with JSON Previews
  2. CRUD Table with JSON HTML Codes
  3. CRUD Table with JSON CSS Codes
  4. CRUD Table with JSON JS Codes

How do I make an crud table with json?

A simple CRUD table.Font used: https://fonts.google.com/specimen/Droid+Sans. What is a crud table with json? How do you make a crud table with json? This script and codes were developed by Takane Ichinose on 10 November 2022, Thursday.

CRUD Table with JSON Previews
IQ Test

CRUD Table with JSON - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CRUD Table with JSON</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"><!-- This element is optional --> <table id="tk-crud-table" class="tk-crud-table"></table>
</div>
<div class="text-center"> Commands: Press [Enter] key at the last line to create new line.<br /> At the last input, press [Tab] key to create new line.<br /> Edit any lines then focus-out on the input to update.<br /> Press [Delete] button at the line (Except last line) to delete.
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CRUD Table with JSON - Script Codes CSS Codes

* { font-family: "Droid Sans", sans-serif; padding: 0; margin: 0
}
/* This class is optional */
.container { margin: 50px auto 25px;
}
/* This class is optional */
.text-center { text-align: center;
}
.tk-crud-table { margin: 0 auto; /* This is optional */ border-collapse: collapse;
}
.tk-crud-table > thead > tr > th { background: #afafaf; height: 30px; line-height: 30px; border: solid 2px black;
}
.tk-crud-table > tbody > tr > td { border: solid 2px black;
}
.tk-crud-table > tbody > tr > td.active { outline: solid 3px black;
}
.tk-crud-table > tbody > tr > td > input[type="text"] { width: 120px; height: 30px; padding: 0 5px; border: none; outline: none;
}

CRUD Table with JSON - Script Codes JS Codes

const tempData = '<!--DATA-->';
function convertTkCrudTableToJSON(tblElm, cmd) { var tHeadString = '{"head": [' + tempData + '], '; var tHeadStringTemp = ''; var tBodyString = '"body": [' + tempData + ']}'; var tBodyStringTemp = ''; var returnString = ''; $(tblElm).find('thead > tr > th').each(function() { tHeadStringTemp += '"' + $(this).text() + '", '; }); tHeadStringTemp = tHeadStringTemp.substring(0, tHeadStringTemp.length - 2); tHeadString = tHeadString.replace(tempData, tHeadStringTemp); $(tblElm).find('tbody > tr').each(function(index, value) { if (!$(this).hasClass('is-delete')) { tBodyStringTemp += '{'; $(this).find('td > input').each(function() { tBodyStringTemp += '"' + $(this).attr('tbl-data') + '": "' + $(this).val() + '", '; }); tBodyStringTemp = tBodyStringTemp.substring(0, tBodyStringTemp.length - 2); if ((cmd === 'C' && cmd !== 'D') && index === $(this).parent().find('tr').length - 1) { tBodyStringTemp += '}, {'; $(this).find('td > input').each(function() { tBodyStringTemp += '"' + $(this).attr('tbl-data') + '": "' + $(this).val() + '", '; }); tBodyStringTemp = tBodyStringTemp.substring(0, tBodyStringTemp.length - 2); } tBodyStringTemp += '}, '; } }); tBodyStringTemp = tBodyStringTemp.substring(0, tBodyStringTemp.length - 2); tBodyString = tBodyString.replace(tempData, tBodyStringTemp); returnString = tHeadString + tBodyString; return returnString;
}
function setTkCrudTable(tblElm, data, cmd, callback) { var dataJSON = $.parseJSON(data); var tHeadString = '<thead><tr>' + tempData + '</tr></thead>'; var tHeadStringTemp = ''; var tBodyString = '<tbody>' + tempData + '</tbody>'; var tBodyStringTemp = ''; $(tblElm).html(''); $.each(dataJSON.head, function(index, value) { tHeadStringTemp += '<th>' + value + '</th>'; }); tHeadString = tHeadString.replace(tempData, tHeadStringTemp); $(tblElm).append(tHeadString); $.each(dataJSON.body, function(index, value) { var tBodyStringRow = '<tr>' + tempData + '</tr>'; var tBodyStringRowTemp = ''; $.each(value, function(index2, value2) { tBodyStringRowTemp += '<td class="tk-crud-data"><input type="text" class="tk-crud-text" value="' + value2 + '" tbl-data="' + index2 + '" /></td>'; }); tBodyStringRow = tBodyStringRow.replace(tempData, tBodyStringRowTemp); tBodyStringTemp += tBodyStringRow; if (cmd === 'R' && dataJSON.body.length === index + 1) { var tBodyStringRowEmpty = '<tr>' + tempData + '</tr>'; var tBodyStringRowEmptyTemp = ''; $.each(value, function(index2, value2) { tBodyStringRowEmptyTemp += '<td><input type="text" class="tk-crud-text" tbl-data="' + index2 + '" /></td>'; }); tBodyStringRowEmpty = tBodyStringRowEmpty.replace(tempData, tBodyStringRowEmptyTemp); tBodyStringTemp += tBodyStringRowEmpty; } }); tBodyString = tBodyString.replace(tempData, tBodyStringTemp); $(tblElm).append(tBodyString); if (!!callback) { callback(tblElm); }
}
$(document).ready(function() { $.fn.tkCrudTable = function(option) { var tblElm = this; var tblData = option.data; setTkCrudTable(tblElm, tblData, 'R'); $(this).on('focus', 'input.tk-crud-text', function() { $(this).parent().addClass('active'); }); $(this).on('blur', 'input.tk-crud-text', function() { $(this).parent().removeClass('active'); tblData = convertTkCrudTableToJSON(tblElm, 'U'); }); $(this).on('keydown', 'tr:last-child > td:last-child > input.tk-crud-text', function(evt) { if (evt.keyCode === 9 && !evt.shiftKey) { evt.preventDefault(); tblData = convertTkCrudTableToJSON(tblElm, 'C'); setTkCrudTable(tblElm, tblData, 'C', function() { $(tblElm).find('tbody > tr:last-child > td:first-child > input.tk-crud-text').focus(); }); } }); $(this).on('keydown', 'tr:last-child > td > input.tk-crud-text', function(evt) { if (evt.keyCode === 13) { tblData = convertTkCrudTableToJSON(tblElm, 'C');setTkCrudTable(tblElm, tblData, 'C', function() { $(tblElm).find('tbody > tr:last-child > td:first-child > input.tk-crud-text').focus(); }); } }); $(this).on('keydown', 'tr > td.tk-crud-data > input.tk-crud-text', function(evt) { if (evt.keyCode === 46) { var msg = (typeof option.deleteMessage === 'undefined') ? 'Do you really want to delete this row?' : option.deleteMessage; if (confirm(msg)) { evt.preventDefault(); $(this).parent().parent().addClass('is-delete'); tblData = convertTkCrudTableToJSON(tblElm, 'D'); setTkCrudTable(tblElm, tblData, 'D'); } } }); return this; };
});
// From here below is how to use.
// Assuming that I got this JSON from the database
var result = '{"head": ["Data 1", "Data 2", "Data 3"], "body": [{"data1": "Value 1_1", "data2": "Value 2_1", "data3": "Value 3_1"}, {"data1": "Value 1_2", "data2": "Value 2_2", "data3": "Value 3_2"}, {"data1": "Value 1_3", "data2": "Value 2_3", "data3": "Value 3_3"}, {"data1": "Value 1_4", "data2": "Value 2_4", "data3": "Value 3_4"}, {"data1": "Value 1_5", "data2": "Value 2_5", "data3": "Value 3_5"}]}';
$(document).ready(function() { $('.tk-crud-table').tkCrudTable({ data: result, deleteMessage: 'Do you really want to delete this row?' // TODO: validator });
});
CRUD Table with JSON - Script Codes
CRUD Table with JSON - Script Codes
Home Page Home
Developer Takane Ichinose
Username takaneichinose
Uploaded November 10, 2022
Rating 3.5
Size 3,486 Kb
Views 14,168
Do you need developer help for CRUD Table with JSON?

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!

Takane Ichinose (takaneichinose) Script Codes
Name
Flat-style drawer Contact Me
Bootstrap Messaging
Responsive alert box
Tabs
Responsive Full-page Parallax Slider
Pure CSS Off-Canvas with Bootstrap
Halloween Cute Spider
Navbar login
Parallax Scrolling
Cow drawing
Create amazing web content 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!