Paste rows from Excel

by Alon Rotem

HTML

<p>
		Paste rows from Excel/Outlook into this table.<br/>
		Note that the number of columns should match the current table's columns.<br/>
		Features:
		<ul>
			<li>Cross browser: IE, Chrome, Edge</li>
			<li>Row/cell highlighting</li>
			<li>Paste validation: only tabular rows with matching number of columns is accepted</li>
			<li>Rows appended under the currenty active row</li>
		</ul>
	</p>
	<div id='resultsTable'>
		<table border=1 cellpadding=3 cellspacing=0>
		  <tr>
			<td><div contenteditable='true'>Column A</div></td><td><div contenteditable='true'>Column B</div></td><td><div contenteditable='true'>Column C</div></td>
		  </tr>
		  <tr>
			<td><div contenteditable='true'>Cell A1</div></td><td><div contenteditable='true'>Cell A2</div></td><td><div contenteditable='true'>Cell A3</div></td>
		  </tr>
		  <tr>
			<td><div contenteditable='true'>Cell B1</div></td><td><div contenteditable='true'>Cell B2</div></td><td><div contenteditable='true'>Cell B3</div></td>
		  </tr>
		</table>
	</div>

CSS

body {
		font-family: arial, verdana;
		font-size: 11pt;
	}
	li
	{
		list-style-type: square;
	}
	tr.selectedRow {
		background-color : #A9D08E;
	}
	td.selectedCell {
		background-color : #E2EFDA;
	}

JavaScript

$(document).ready(function() {
	  bindEvents($("#resultsTable td div"));
	  clearTableFormatting();
	});
	
	function bindEvents($selector)
	{
	
  		var ctrlDown = false,
			vKey = 86, ctrlKey = 17, cmdKey = 91, lineBreak = 13, tabChar = 9;
			
		var ctrlKeys = [
			ctrlKey,
			cmdKey
		];
		var allowedKeys = [
				37 /*arrowLeft*/,
				38 /*arrowUp*/,
				39 /*arrowRight*/,
				40 /*arrowDown*/,
				ctrlKey,
				cmdKey
			];	
	
		$selector

			.keydown('keydown', function(e) {
				if (ctrlKeys.indexOf(e.keyCode) >= 0)
					ctrlDown = true;
				return ((ctrlDown && e.keyCode == vKey) || (allowedKeys.indexOf(e.keyCode) >= 0));
			})
			
			.keyup(function(e){
				if (ctrlKeys.indexOf(e.keyCode) >= 0)
					ctrlDown = false;
			})
			
			.bind('paste', function(e) {
				var isValidInput = true;
				console.log("pasting...");
				e.preventDefault();
				console.log("not pasting");				
				
				//alert(window.clipboardData.getData("text"));
				var numOfColumns = $("#resultsTable tr:nth-child(1) td").length;
				var clipboard = e.clipboardData || window.clipboardData || e.originalEvent.clipboardData;
				var pastedText = clipboard.getData("text");
				var pastedRows = pastedText.split(String.fromCharCode(lineBreak));
				var tableToPaste = "";
				for (var i=0; i < pastedRows.length; i++) {
					if(!isEmptyOrSpaces(pastedRows[i])){
						tableToPaste += "<tr>";
						pastedRows[i] = pastedRows[i].split(String.fromCharCode(tabChar));
						if(pastedRows[i].length != numOfColumns)
						{
							alert("Invalid input. Please paste content with " + numOfColumns + " columns!");
							isValidInput = false;
							break;
						}
						else
						{
							for(var j=0; j < pastedRows[i].length; j++)
							{
								tableToPaste += "<td><div contenteditable='true'>";
								tableToPaste += pastedRows[i][j];
								tableToPaste += "</div></td>";
							}
						}
						tableToPaste += "</tr>";
					}
				}
				if(isValidInput && !isEmptyOrSpaces(tableToPaste))
				{
					var...