Bootstrap Line Items Table dt80LerbSB

javascript

var Order = function() {
	this.addLineItem = function() {
		// build new table row from line item inputs
		var newRow = '<tr>'+
						'<td>'+$('#itc_part_input').val()+'</td>'+
						'<td>'+$('#description_input').val()+'</td>'+
						'<td>'+$('#vendor_input').val()+'</td>'+
						'<td>'+$('#vendor_part_input').val()+'</td>'+
						'<td>'+$('#cost_input').val()+'</td>'+
						'<td>'+$('#price_input').val()+'</td>'+
						'<td>'+$('#qty_input').val()+'</td>'+
						'<td>'+$('#subtotal_input').val()+'</td>'+
						'<td><span class="glyphicon glyphicon-remove remove-line-item" title="Remove Line Item"></span></td>'+
					 '</tr>';
		
		// add the new row to the table
		$('.line-items > tbody:last').append(newRow);
		
		// scroll to the bottom of the page to compensate for the new table row
		$('html, body').animate({ scrollTop: $(document).height() }, 'fast');

// clear line item inputs
		$('.line-items tfoot input, .line-items tfoot textarea').each(function() {
			$(this).val('');
		});
		
		// set default qty to 1 for convenience
		$('.line-items > tfoot > tr > th:nth-child(7) input').each(function() {
			$(this).val('1');
		});
		
		// return focus to first input field after adding line item,
		// specifically useful when tabbing out of qty_input
		$('.line-items > tfoot > tr > th:first-child input').focus();

// recalculate total
		this.updateTotal();
	}

this.removeLineItem = function(row) {
		// remove row from table
		row.remove();

// to delete an existing line item we have to pass its id to the model with an action => delete flag
		new LineItem();
		$('<input>').attr({
			type: 'hidden',
			name: 'data[OrderLineItem]['+LineItem.count+'][id]',
			value: row.attr('data-line-item-id'),
		}).appendTo('form');
		$('<input>').attr({
			type: 'hidden',
			name: 'data[OrderLineItem]['+LineItem.count+'][action]',
			value: 'delete',
		}).appendTo('form');
		
		// recalculate total
		this.updateTotal();
	}
	
	// calculate order total from subtotals
	this.calculateTotal = function() {
		var total = 0;
		$('.line-items > tbody > tr > td:nth-child(8)').each(function() {
			total += parseFloat($(this).html()) || 0;
		});
		return total.toFixed(2);
	}

// write order total to table footer
	this.updateTotal = function() {
		var amount = this.calculateTotal();
		$('.order-total').html('Total: $' + amount);
	}
	
	// adds hidden form fields for dynamically created line items
	this.processLineItems = function() {
		// add form fields for each line item in Model.{0..n}.field naming convention
		$('.line-items > tbody > tr').each(function() {
			// increments counter for Model.{0..n}.field naming convention
			new LineItem();

// OrderLineItem id is needed to update records
			$('<input>').attr({
				type: 'hidden',
				name: 'data[OrderLineItem]['+LineItem.count+'][id]',
				value: $(this).attr('data-line-item-id'),
			}).appendTo('form');

// line item fields
			var colCount = 0; var fields = ['itc_part', 'description', 'vendor', 'vendor_part', 'cost', 'price', 'qty', 'subtotal'];
			$.each(this.cells, function(){
				$('<input>').attr({
					type: 'hidden',
					name: 'data[OrderLineItem]['+LineItem.count+']['+fields[colCount]+']',
					value: $(this).html()
				}).appendTo('form');
				colCount++;
			});
		});
	}

this.save = function(afterSaveAction) {
		// disable any action buttons on the page to prevent double submit
		$('.btn').button('loading');

// turn line items table into form fields before submit
		this.processLineItems();

// afterSaveAction tells controller what to do after save
		// stay on page by default, controller will refresh page
		// this default action is also set inside the controller
		if (typeof(afterSaveAction) === 'undefined') afterSaveAction = 'continue';
		$('<input>').attr({
			type: 'hidden',
			name: 'data[Order][action]',
			value: afterSaveAction,
		}).appendTo('form');

// submit the form
		$('form[id^=Order]').submit();
	}
	
	// calculate order total when Order is initialized
	this.updateTotal();
}
Order = new Order();

// helper to keep count of dynamic line items on page
function LineItem() {
	if (typeof LineItem.count == 'undefined') {
		LineItem.count = 0;
	} else {
		LineItem.count++;
	}
}

// force numeric input function
$.fn.ForceNumeric = function() {
	return this.each(function() {
		$(this).keydown(function(event) {
			var key = event.charCode || event.keyCode || 0;
			// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
			// home, end, period, and numpad decimal
			return (
				key == 8 ||
				key == 9 ||
				key == 46 ||
				key == 110 ||
				key == 190 ||
				(key >= 35 && key <= 40) ||
				(key >= 48 && key <= 57) ||
				(key >= 96 && key <= 105)
			);
		});
	});
};

$(function() {
	// set datepicker defaults globally
	//$.fn.datepicker.defaults.autoclose = true;
	//$.fn.datepicker.defaults.todayHighlight = true;
	
	$('#itc_part_input').change(function(){
		this.value = this.value.toUpperCase(); 
	});

// force numeric input
	$('#cost_input, #price_input, #qty_input').ForceNumeric();

// format number to two decimal points on change
	$('#cost_input, #price_input').change(function () {
		$(this).val(
			parseFloat($(this).val()).toFixed(2)
		);
	});

// calculate subtotal during input
	$('#price_input, #qty_input').change(function () {
		var subtotal = $('#price_input').val() * $('#qty_input').val();
		$('#subtotal_input').val(
			parseFloat(subtotal).toFixed(2)
		);
	});
	
	// tabbing out of #qty_input automatically adds line item
	$("#qty_input").on('keydown', function(e) { 
		var keyCode = e.keyCode || e.which;

if (keyCode == 9) { 
			e.preventDefault(); 
			Order.addLineItem();
		}
	});

// add line item to table
	$('.add-line-item').click(function(event) {
		Order.addLineItem();
	});
		
	// make table cell editable when clicked
	function enableLineItemEdit() {
		$('.line-items').on('click', 'tbody td:not(:last-child)', function(event) {
			if (event.currentTarget.cellIndex == 1) {
				$(this).html('<textarea class="form-control input-sm" id="description_input" name="description_input">'+$(this).text()+'

css

/* make thead and tfoot cells darker */
.table th {
	background: #f5f5f5;
}

/* undo Bootstrap's 2px thead border */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
	border-bottom-width: 1px;
}

/* only allow horizontal textarea resize */
textarea {
	resize: vertical;
}

/* but allow textarea resize for line item description */
.line-items textarea {
	min-width: 300px;
	resize: both;
}

/* align text vertically in all cells */
.line-items th,
.line-items td {
	vertical-align: middle !important;
}

/* don't wrap headers or ITC Part No. column */
.line-items > thead > tr > th,
.line-items > tbody > tr > td:first-child {
	white-space: nowrap;
}

/* show line breaks in Description column */
.line-items > tbody > tr > td:nth-child(2) {
	white-space: pre-line;
}

/* center text in columns: Cost, Price, Qty, Subtotal */
.line-items > thead > tr > th:not(:nth-child(2)),	/* thead: center all except Description */
.line-items > tbody > tr > td:nth-child(n+3),	   /* tbody: don't center first two columns: ITC Part & Description */
.line-items > tfoot > tr > th:not(:nth-child(2)) input {
	text-align: center;
}

/* uppercase ITC Part No. input */
.line-items > tfoot > tr > th:first-child input {
	text-transform: uppercase;
}

/* make action icons slightly bigger */
.line-items.editable > thead > tr > th:last-child,
.line-items.editable > tbody > tr > td:last-child,
.line-items.editable > tfoot > tr > th:last-child {
	font-size: 13pt;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html

Line Items Table How to use jQuery to append new rows in a table.
1	2060 Bootstrap v3.1.1 Related snippets
table append jquery
Created by: subwiz00

Bootply

Line Items Table

How to use jQuery to append new rows in a table.

Bootply v1.2.1
An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

id
style
class

ITC Part	Description	Vendor	Vendor Part	Cost	Price	Qty	Subtotal

Order Number: 80071 Total: $0.00

Bootply

Line Items Table

How to use jQuery to append new rows in a table.

Bootply v1.2.1 An unofficial Bootstrap playground.

Fork on GitHub | Contact

h1

h2

h3

h4

Starter Template

Details

Do you want to proceed?

Password Lookup

Would you like to upgrade?

$9/mo

Contact Us

Bootply v1.2.1
An unofficial Bootstrap playground.