Spreadsheet
In the following example, the data variable will be automatically updated when the cell value changes.The following content will be the content of the data variable.
Source code
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <div id="spreadsheet"></div> <textarea id='console'></textarea><br> <input type='button' value='Get the content of the data variable' onclick="document.getElementById('console').value = JSON.stringify(data)"> <script> var data = [ { "id":1, "name":"Jorge", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3120", }, { "id":2, "name":"Antonio", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3121", }, { "id":3, "name":"Manoel", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3123", }, { "id":4, "name":"Pedro", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3124", }, { "id":5, "name":"Carlos", "img":"img/nophoto.jpg", "department":"Marketing", "extension":"3125", }, ]; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('MWFlYjRiYTIwNWRmZTA1OTYyNGUyOWYyZDRhZjUyNTI4NDY5ZmJjNTdhMzI3Mjk4NjlkZjQyZDZmNGYyYWUxMWI5NGRlN2IwNTZlZjFmNzk1ZjFhOTQ0ZTRlNDc3YjgzYzY0ZDNjYmM4OWVjMGE2OGRjNDVmN2FlZjIyNjc2NzQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTURjeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: data, minDimensions: [6, 5], worksheetName: 'Employees', columnDrag: false, columns: [ { title: 'Id', type: 'autonumber', name: 'id', readOnly: true, primaryKey: true, }, { title: 'Name', type: 'text', name: 'name', width: '140px', }, { title: 'Photo', type: 'image', name: 'img', width: '80px', render: 'round', }, { title: 'Role', type: 'record', name: 'role', width: '180px', worksheetId: 'roles', worksheetColumn: 1, }, { title: 'Department', type: 'record', name: 'department', width: '180px', worksheetId: 'departments', }, { title: 'Manager', type: 'record', name: 'parent', width: '100px', worksheetId: 'employees', worksheetColumn: 1, }, { title: 'Extension', name: 'extension', width: '80px' }, ], }] }); </script> </html>