Editable Table Concept

Developer
Robert Lowe
Size
7,026 Kb
Views
40,480
  1. Editable Table Concept Previews
  2. Editable Table Concept HTML Codes
  3. Editable Table Concept CSS Codes
  4. Editable Table Concept JS Codes

How do I make an editable table concept?

What is a editable table concept? How do you make a editable table concept? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Editable Table Concept Previews
IQ Test

Editable Table Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Editable Table Concept</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://www.trueatlas.com/css/select2.css'>
<link rel='stylesheet prefetch' href='https://www.trueatlas.com/css/select2-bootstrap.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--<table class="editTable table"> <thead> <tr> <th class="left-align">NAME</th> <th class="center">HOURS / QUANTITY</th> <th class="center" class="center">UNIT PRICE</th> <th class="center">TOTAL</th> </tr> </thead> <tbody> <tr> <td class="left-align">2 Man Crew</td> <td class="center">2</td> <td class="center">$ 225.20</td> <td class="center">$ 1126.00</td> </tr> <tr> <td class="left-align">Drafter</td> <td class="center">1</td> <td class="center">$ 225.20</td> <td class="center">$ 1126.00</td> </tr> <tr> <td class="left-align">Project Manager</td> <td class="center">5</td> <td class="center">$ 225.20</td> <td class="center">$ 1126.00</td> </tr> <tr> <td class="left-align">Project Surveyor</td> <td class="center">2</td> <td class="center">$ 225.20</td> <td class="center">$ 1126.00</td> </tr> <tr> <td class="left-align">GIS Analyst</td> <td class="center">5</td> <td class="center">$ 225.20</td> <td class="center">$ 1126.00</td> </tr> </tbody>
</table>-->
<div class="table-container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.trueatlas.com/js/underscore-min.js'></script>
<script src='https://www.trueatlas.com/js/select2.js'></script> <script src="js/index.js"></script>
</body>
</html>

Editable Table Concept - Script Codes CSS Codes

.table-container { background: white; margin: 50px 10% 0 10%; border: 1px solid #DDD; border-radius: 3px;
}
.editTable { margin-bottom: 0px !important;
}
.editTable tbody tr { position: relative; cursor: pointer;
}
.editTable tbody td { line-height: 30px;
}
.editTable tbody td.removeRowCell { font-size: 1.3em; padding-right: 0px;
}
.left-align { text-align: left;
}
.center { text-align: center !important;
}
.hide { display: none;
}
.editTableInput { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; height: 28px !important; text-align: center;
}
.editTableSelect { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important;
}
.editTableSelect a { height: 28px !important;
}
.editTable tr:hover .rowMenu { width: 100px; }
.editTable .rowMenu:after{ background: #1C699C; }
.editTable .tableActionsCell { position: relative;
}
.editTable .tableActions { position: absolute; background: #fff; width: 25px; top: 5px; right: 0px; border-radius-top-left: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-shadow: -6px -1px 10px 1px rgba(50, 50, 50, 0.6);
}
.editTable .tableActions i { position: relative; font-size: 1.3em; cursor: pointer; margin: 5px;
}
.editTable i:hover { font-weight: bold;
}
.editTable i.add:hover { color: #0066FF;
}
.editTable i.edit:hover { color: #949494;
}
.editTable i.save:hover { color: #1B82C5;
}
.editTable i.remove:hover { color: red;
}
/* checkbox styles */
.bigCheckbox {	-webkit-appearance: none;	background-color: #fafafa;	border: 1px solid #cacece;	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);	padding: 9px;	border-radius: 3px;	display: inline-block;	position: relative;
}
.bigCheckbox:active, .bigCheckbox:checked:active {	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.bigCheckbox:checked {	background-color: #e9ecee;	border: 1px solid #adb8c0;	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);	color: #39499b;
}
.bigCheckbox:checked:after {	content: '\2714';	font-size: 14px;	position: absolute;	top: 0px;	left: 3px;	color: #39499b;
}
[type="checkbox"]:disabled:not(:checked),
[type="checkbox"]:disabled:checked{ box-shadow: none; border-color: #bbb; background-color: #d9d9d9;
}
[type="checkbox"]:disabled:checked{ color: #39499b;
}
[type="checkbox"]:disabled{ color: #39499b;

Editable Table Concept - Script Codes JS Codes

$(document).ready(function () { var selectOptions = ['2 Man Crew', 'Drafter', 'Project Manager', 'Project Surveyor', 'GIS Analyst']; var tableData = { headers: ['NAME', 'HOURS / QUANTITY', 'UNIT PRICE', 'TOTAL', 'TAXES'], data: [ { name: '2 Man Crew', hours: 1, price: 125, total: 1126.00, taxes: true }, { name: 'Drafter', hours: 2, price: 225, total: 2126.00, taxes: true }, { name: 'Project Manager', hours: 3, price: 325, total: 3126.00, taxes: true}, { name: 'Project Surveyor', hours: 4, price: 425, total: 4126.00, taxes: true }, { name: 'GIS Analyst', hours: 5, price: 525, total: 5126.00, taxes: true } ], order: ['name', 'hours', 'price', 'total', 'taxes'], editables: { name: { type: 'select', options: selectOptions, distinct: true }, hours: { type: 'input' }, price: { type: 'input' }, taxes: { type: 'checkbox', checked: 'Yes', unchecked: 'No' } }, styles: { headers: ['left-align', 'center', 'center', 'center', 'center'], data: { name: 'left-align', hours: 'center', price: 'center', total: 'center', taxes: 'center' } } }; var editTable = createEditTable(tableData); var $table = $(editTable.getTable()); $('.table-container').append($table); function onRowChanged (event, rowInfo) { rowInfo.data.total = rowInfo.data.hours * rowInfo.data.price; editTable.updateRow(rowInfo.rowId, rowInfo.data); } $table.on('row-changed', onRowChanged);
});
function createEditTable (tableData) { var $table, tableState = { data: {} }, editMode = false, templates = { table: _.template('<table class="table editTable"><%= thead %><%= tbody %></table>'), header: _.template('<thead><tr><%= headers %></tr></thead>'), headerCell: _.template('<th class="<%= css_class %>"><%= name %></th>'), emptyHeaderCell: _.template('<th class="<%= css_class %>"></th>'), rowActionsHeader: _.template('<th class="tableActionsCell clearfix"><div class="tableActions"><i class="add icon-plus pull-left" title="Add Row"></i><i class="edit icon-pencil pull-left" title="Edit Table"></i><i class="save icon-save pull-left" title="Apply Changes"></i></div></th>'), body: _.template('<tbody><%= body %></tbody>'), row: _.template('<tr data-rowid="<%= rowid %>" class="viewRow"><%= rowCells %></tr>'), rowCell: _.template('<td data-key="<%= key %>" class="<%= css_class %>"><%= value %></td>'), editRow: _.template('<tr data-rowid="<%= rowid %>" class="editRow hide"><%= rowCells %></tr>'), editRowInputCell: _.template('<td><input type="text" class="editTableInput" data-key="<%= key %>"/></td>'), editRowSelectCell: _.template('<td><select class="editTableSelect" data-key="<%= key %>"><%= options %></select></td>'), editRowCheckboxCell: _.template('<td class="center"><input type="checkbox" data-key="<%= key %>" class="bigCheckbox" checked=""></td>'), selectOption: _.template('<option value="<%= index %>"><%= value %></option>'), placeholderOption: _.template('<option value="-1">Please Select...</option>'), rowRemoveCell: _.template('<td class="removeRowCell" style="width: 1px;"><i class="remove icon-remove" data-rowid="<%= rowId %>"></i></td>'), emptyCell: _.template('<td class="<%= css_class %>"></td>'), editRowSelector: _.template('tr.editRow[data-rowid="<%= rowId %>"]'), viewRowSelector: _.template('tr.viewRow[data-rowid="<%= rowId %>"]'), allViewRowSelector: _.template('tr.viewRow'), allEditRowSelector: _.template('tr.editRow'), allVisibleEditRowSelector: _.template('tr.editRow:visible'), viewCellSelector: _.template('td[data-key="<%= key %>"]'), editCellSelector: _.template('td.editRowCell[data-key="<%= key %>"]'), editInputSelector: _.template('input[type="text"][data-key="<%= key %>"]'), editSelectSelector: _.template('select[data-key="<%= key %>"]'), editCheckboxSelector: _.template('input[type="checkbox"][data-key="<%= key %>"]') }; /* Table Build */ function makeSelectOptions (selectOptions) { if (!selectOptions) return ''; var options = []; options.push(templates.placeholderOption()); for (var index in selectOptions) { var optionData = { index: index, value: selectOptions[index] }; options.push(templates.selectOption(optionData)); } return options.join(''); } function makeEditRowInputCell (key) { return templates.editRowInputCell({ key: key }); } function makeEditRowSelectCell (key) { var selectOptions = tableData.editables[key].options || ''; return templates.editRowSelectCell({ key: key, options: makeSelectOptions(selectOptions) }); } function makeEditRowCheckboxCell (key) { return templates.editRowCheckboxCell({ key: key }); } function makeRowCell (cellData) { return templates.rowCell(cellData); } function makeEditRowCell (key) { var type = tableData.editables[key].type || ''; switch (type) { case 'input': return makeEditRowInputCell(key); break; case 'select': return makeEditRowSelectCell(key); break; case 'checkbox': return makeEditRowCheckboxCell(key); break; } return ''; } function makeEmptyCell (hidden) { var className = hidden ? 'hide' : ''; return templates.emptyCell({ css_class: className }); } function makeEmptyHeaderCell (hidden) { var className = hidden ? 'hide' : ''; return templates.emptyHeaderCell({ css_class: className }); } function makeRowRemoveCell (rowId) { return templates.rowRemoveCell({ rowId: rowId }); } function makeRowActionsHeaderCell () { return templates.rowActionsHeader(); } function makeRow (rowId, rowData) { var rowCells = []; rowCells.push(makeEmptyCell(true)); for (var i = 0; i < tableData.order.length; i++) { var key = tableData.order[i]; var cellData = { key: key, value: getRowDisplayValue(key, rowData[key]), css_class: tableData.styles.data[key] || '' }; rowCells.push(makeRowCell(cellData)); } rowCells.push(makeEmptyCell()); return templates.row({ rowid: rowId, rowCells: rowCells.join('') }); } function makeEditRow (rowData, rowId) { var rowCells = []; rowCells.push(makeRowRemoveCell(rowId)); for (var i = 0; i < tableData.order.length; i++) { var key = tableData.order[i]; if (isEditable(key)) { rowCells.push(makeEditRowCell(key)); } else { var cellData = { key: key, value: rowData[key], css_class: 'editRowCell ' + tableData.styles.data[key] || '' }; rowCells.push(makeRowCell(cellData)); } } rowCells.push(makeEmptyCell()); return templates.editRow({ rowid: rowId, rowCells: rowCells.join('') }); } function makeHeaders () { var headerCells = []; headerCells.push(makeEmptyHeaderCell(true)); for (var index in tableData.headers) { var headerData = { name: tableData.headers[index], css_class: tableData.styles.headers[index] || '' }; headerCells.push(templates.headerCell(headerData)); } headerCells.push(makeRowActionsHeaderCell()); return templates.header({ headers: headerCells.join('') }); } function makeBody () { var rows = []; for (var index in tableData.data) { var rowData = tableData.data[index], rowId = _.uniqueId() rows.push(makeRow(rowId, rowData)); rows.push(makeEditRow(rowData, rowId)); tableData.data[index].rowId = rowId; } return templates.body({ body: rows.join('') }); } function addRowToTable(rowId, rowData) { var $viewRow = makeRow(rowId, rowData), $editRow = makeEditRow(rowData, rowId), $tbody = $table.find('tbody'); $tbody.append($viewRow); $tbody.append($editRow); } /* Table DOM Access */ function getEditRow (rowId) { return $table.find(templates.editRowSelector({ rowId: rowId })); } function getViewRow (rowId) { return $table.find(templates.viewRowSelector({ rowId: rowId })); } function getEditCell (rowId, key) { return getEditRow(rowId).find(templates.editCellSelector({ key: key })); } function getViewCell (rowId, key) { return getViewRow(rowId).find(templates.viewCellSelector({ key: key })); } function getEditRowInput (rowId, key) { return getEditRow(rowId.toString()).find(templates.editInputSelector({ key: key })); } function getEditRowSelect (rowId, key) { return getEditRow(rowId).find(templates.editSelectSelector({ key: key })); } function getEditRowCheckbox (rowId, key) { return getEditRow(rowId).find(templates.editCheckboxSelector({ key: key })); } function getAllViewRows () { return $table.find(templates.allViewRowSelector()); } function getAllEditRows () { return $table.find(templates.allEditRowSelector()); } function getAllVisibleEditRows () { return $table.find(templates.allVisibleEditRowSelector()); } function getRowId ($row) { return $row.data('rowid'); } function getRowDisplayValue (key, value) { if (!isEditable(key)) return value; var type = getEditableType(key); switch (type) { case 'checkbox': return getCheckboxDisplayValue(key, value); break; } return value; } function updateRemoveRowHeader () { var updateAction = (getAllVisibleEditRows().length === 0) ? hideRemoveRowHeader : showRemoveRowHeader; updateAction(); } function showRemoveRowHeader () { $table.find('thead th:first').show(); } function hideRemoveRowHeader () { $table.find('thead th:first').hide(); } function isEditable (key) { return _.contains(_.keys(tableData.editables), key); } function getEditableType (key) { if (!isEditable(key)) return 'none'; return tableData.editables[key].type || 'none'; } function populateEditables () { var rowData; for (var rowId in tableState.data) { populateEditablesForRow(rowId); } } function populateEditablesForRow (rowId) { var rowData = tableState.data[rowId]; console.log('populating with data ', rowData); populateEditRow(rowId, rowData); } function populateEditRow (rowId, rowData) { var value, type; for (var key in rowData) { value = rowData[key]; type = getEditableType(key); switch (type) { case 'input': setInputValue(rowId, key, value); break; case 'select': setSelectValue(rowId, key, value); break; case 'checkbox': setCheckboxValue(rowId, key, value); default: getEditCell(rowId, key).html(value); } } } function applyEditValues () { for (var rowId in tableState.data) { applyEditValuesForRow(rowId) } } function applyEditValuesForRow (rowId, silent) { var rowData = tableState.data[rowId]; for (var key in rowData) { if (!isEditable(key)) continue; switch (getEditableType(key)) { case 'input': tableState.data[rowId][key] = getInputValue(rowId, key); break; case 'select': tableState.data[rowId][key] = getSelectValue(rowId, key); break; case 'checkbox': console.log('getCheckboxValue: ', getCheckboxValue(rowId, key)); tableState.data[rowId][key] = getCheckboxValue(rowId, key); break; } } if (!silent) $table.trigger('row-changed', {rowId: rowId, data: rowData }); } function populateView () { for (var rowId in tableState.data) { populateViewForRow(rowId); } } function populateViewForRow (rowId) { var rowData = tableState.data[rowId]; for (var key in rowData) { var value = rowData[key]; if (isEditable(key)) { console.log("here"); var type = getEditableType(key); switch (type) { case 'checkbox': { getViewCell(rowId, key).html(getCheckboxDisplayValue(key, value)); break; } default: { getViewCell(rowId, key).html(value); } } } else { getViewCell(rowId, key).html(value); } } } function getInputValue (rowId, key) { var input = getEditRowInput(rowId, key); return input.val(); } function getSelectValue (rowId, key) { var index = getEditRowSelect(rowId, key).select2('val'); return selectValueOf(key, index); } function getCheckboxValue (rowId, key) { var checkbox = getEditRowCheckbox(rowId, key); return checkbox.is(':checked'); } function setInputValue (rowId, key, value) { var $input = getEditRowInput(rowId, key); $input.val(value); } function setSelectValue (rowId, key, value) { var $select = getEditRowSelect(rowId, key); $select.select2('val', selectIndexOf(key, value)); } function setCheckboxValue (rowId, key, value) { var checkbox = getEditRowCheckbox(rowId, key); checkbox.attr('checked', value); } function selectIndexOf (key, value) { var options = tableData.editables[key].options; return _.indexOf(options, value); } function selectValueOf (key, index) { var options = tableData.editables[key].options; return options[index]; } function showEditRow (rowId) { console.log('showing edit row ', rowId); if (!rowId) return; populateEditablesForRow(rowId); getViewRow(rowId).hide(); getEditRow(rowId).show(); updateRowHiddenCells(); } function showViewRow (rowId) { if (!rowId) return; populateViewForRow(rowId); getEditRow(rowId).hide(); getViewRow(rowId).show(); updateRowHiddenCells(); } function showEditAll () { populateEditables(); $table.find('tbody tr.viewRow').hide(); $table.find('tbody tr.editRow').show(); updateRowHiddenCells(); } function showViewAll () { applyEditValues(); populateView(); $table.find('tbody tr.editRow').hide(); $table.find('tbody tr.viewRow').show(); updateRowHiddenCells(); } function setupSelects () { function onSelectClose () { $('.select2-container-active').removeClass('select2-container-active'); $(':focus').blur(); } var selects = $table.find('select'); selects.select2().on('select2-close', onSelectClose); } function setupClickEvents () { setupViewRowClickEvents(); setupEditRowClickEvents(); setupTableActionEvents(); } function setupViewRowClickEvents () { getAllViewRows().each(function () { setupViewRowDblClickEvent($(this)); }); } function setupViewRowDblClickEvent ($row) { $row.on('dblclick', onViewRowDblClick); } function setupEditRowClickEvents () { getAllEditRows().each(function () { setupRemoveRowClickEvent($(this)); setupEditRowKeypressEvents($(this)); }); } function setupRemoveRowClickEvent ($row) { var rowId = getRowId($row); $row.find('.removeRowCell .remove').on('click', { rowId: rowId }, onRemoveRowClick); } function onRemoveRowClick (event) { console.log('onRemoveRowClick'); removeRow(event.data.rowId); } function setupEditRowKeypressEvents ($row) { var rowId = getRowId($row); $row.on('keypress', { rowId: rowId }, onEditRowKeypress); $row.find('.editTableSelect').on('keypress', { rowId: rowId }, onEditRowKeypress); } function onEditRowKeypress (event) { var rowId = event.data.rowId; if ( event.which === 13 ) { event.preventDefault(); applyEditValuesForRow(rowId); showViewRow(rowId); } } function setupTableActionEvents () { var $tableActions = $table.find('.tableActions'), $addBtn = $tableActions.find('.add'), $editBtn = $tableActions.find('.edit'), $saveBtn = $tableActions.find('.save'); $addBtn.on('click', addRow); $editBtn.on('click', showEditAll); $saveBtn.on('click', showViewAll); } function onViewRowDblClick (event) { var $row = $(event.currentTarget); showEditRow(getRowId($row)); } function updateTableState () { var $row, rowId; for (var index in tableData.data) { var rowData = tableData.data[index], rowId = rowData.rowId; setTableStateForRow(rowId, rowData); populateEditRow(rowId, rowData); } for (var key in tableData.order) { if (isDistinctSelect(key)) storeSelectOptionData(key); } console.log('tableState is now ', tableState); } function setTableStateForRow (rowId, rowData) { //console.log('rowId ' + rowId + ' set to ', rowData); tableState.data[rowId] = {}; for (var key in rowData) { tableState.data[rowId][key] = rowData[key]; } } function storeSelectOptionData (key) { var options = tableData.editables[key].options || '', optionData = [], index = 0; for (var optionText in options) { optionData.push({ id: index, text: optionText }); } tableState.distinctSelects[key] = optionData; } function getRowData (rowId) { var $row = getViewRow(rowId), rowData = {}, key; $row.find('td[data-key]').each(function () { var key = $(this).data('key'); rowData[key] = $(this).html(); }); return rowData; } function addRow() { var rowId = _.uniqueId(); var rowData = createEmptyRowData(); setTableStateForRow(rowId, rowData); addRowToTable(rowId, rowData); setupSelects(); setupNewRowEvents(rowId); showEditRow(rowId); } function removeRow (rowId) { console.log('removing row ' + rowId); getViewRow(rowId).remove(); getEditRow(rowId).remove(); delete tableState.data[rowId]; updateRowHiddenCells(); } function createEmptyRowData() { var rowData = {}, index, key; for(index in tableData.order) { key = tableData.order[index]; rowData[key] = ""; } return rowData; } function setupNewRowEvents (rowId) { var $viewRow = getViewRow(rowId), $editRow = getEditRow(rowId); setupViewRowDblClickEvent($viewRow); setupRemoveRowClickEvent($editRow); setupEditRowKeypressEvents($editRow); } function updateRowHiddenCells () { updateRemoveRowHeader(); if (getAllVisibleEditRows().length === 0) { getAllViewRows().find('td:first').hide(); } else { getAllViewRows().find('td:first').show(); } } function getCheckboxDisplayValue (key, isChecked) { if (isChecked) { return tableData.editables[key].checked; } else { return tableData.editables[key].unchecked; } } /* Distinct select options handling */ function isDistinctSelect(key) { if (!isEditable(key)) return false; if (getEditableType(key) != 'select') return false; return tableData.editables[key].distinct || false; } var distinctSelectHandler = function ($select, optionsData) { function addOption (optionData) { } function removeOption (optionData) { } $select.on('addOption', addOption); $select.on('removeOption', removeOption); } function repopulateSelect(rowId, key) { var $select = getEditRowSelect(rowId, key); var optionData = tableState.distinctSelects[key]; $select.select2({ data: optionData }); } function removeSelectOption(rowId, key, option) { } $table = $(templates.table({ thead: makeHeaders(), tbody: makeBody() })); setupSelects(); updateTableState(); setupClickEvents(); //$table.find('tbody tr:first').append('<div class="rowMenu"></div>'); return { getTable: function () { return $table; }, editAll: function () { showEditAll(); }, applyAll: function () { showViewAll(); }, view: function () { showViewAll(); }, updateRow: function (rowId, rowData) { console.log('updateRow: ', rowData); setTableStateForRow(rowId, rowData); applyEditValuesForRow(rowId, true); populateViewForRow(rowId); }, updateRowCell: function (rowId, key, value) { } };
}
Editable Table Concept - Script Codes
Editable Table Concept - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 3.5
Size 7,026 Kb
Views 40,480
Do you need developer help for Editable Table Concept?

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!

Robert Lowe (rlo206) Script Codes
Name
Semantic Element Document Outline
Interactive data table with Angular and SCSS
The Rainball
Testing Semantic UI Grid
Learning to style range inputs
Google Mic Icon
CSS Color Wheel Loaders
Draggables in pure angular
A Pen by Robert Lowe
Fly-Through-Loader
Create amazing video scripts 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!