Table scripting and customizations
Customize the table behavior though javascript.
Source code
<html> <script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <div id="spreasheet2"></div> <script> var data2 = [ ['BR', 'Cheese', 1, 3.99], ['CA', 'Apples', 0, 1.00], ['US', 'Carrots', 1, 0.90], ['GB', 'Oranges', 0, 1.20], ['CH', 'Chocolats', 1, 0.40], ['AR', 'Apples', 1, 1.10], ['AR', 'Bananas', 1, 0.30], ['BR', 'Oranges', 1, 0.95], ['BR', 'Pears', 1, 0.90], ['', '', '', '=ROUND(SUM(D1:D8), 2)'], ]; var table2 = jspreadsheet(document.getElementById('spreasheet2'), { data:data2, columnSorting:false, columns: [ { type: 'autocomplete', title: 'Country', width: '250', url:'/jspreadsheet/countries' }, { type: 'autocomplete', title:'Food', width:'150', source: ['Apples','Bananas','Carrots','Oranges','Cheese','Kiwi','Chocolats','Pears'] }, { type: 'checkbox', title:'Stock', width:'100' }, { type: 'number', title:'Price', width:'100' }, ], updateTable:function(instance, cell, col, row, val, label) { // Number formating if (col == 3) { // Get text txt = cell.innerText; // Format text txt = numeral(txt).format('0,0.00'); // Update cell value cell.innerHTML = '$ ' + txt; } // Total row if (row == 9) { if (col < 3) { cell.innerHTML = ''; } if (col == 2) { cell.innerHTML = 'Total'; cell.style.fontWeight = 'bold'; } cell.className = ''; cell.style.backgroundColor = '#f46e42'; cell.style.color = '#ffffff'; } }, license: 'ZGFiZWU4YzhmODRjNTM0MGQyMTliMDE3MjI5ZDFlN2FmNzAzOTk0OTI5ZjI4ZTkzNGFmZjI4NzEwMGM3YzI0MjdkZTMzZjY1MGUwNzAwNzBkMmVlMmIzN2ZjNzM0MzQ2Y2U0MjQ4NmVhNWRhMDc2YjhiYzFjZDMyYjM1OWFjNDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TkRJMU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> <style> .jexcel tbody tr:nth-child(even) { background-color: #EEE9F1 !important; } </style> </html>