jonswaff/csvcompare.html

## csvcompare.html
<!DOCTYPE html>
<html>
    <head>
        <title>CSV Compare</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
  		<!-- Basic CSV comparison. Aligns all identical values from CSV strings into a table. --->

            function makeItSo() {
                var numberOfCols = 3; // Number of sets/columns we are working with
                var rows = {}; // Our final associative array/object to render
                var thisSet = []; // Our current working set of numbers
                var v; // temporarily holds a value of the set

                for (var c=1; c <= numberOfCols; c++) {
                    // get array of number in the (col1, col2, col3, etc...) textarea
                    thisSet = csvToArray("col"+c);
                    thisSet.sort();

                    for (var i=0; i < thisSet.length; i++) {
                        v = thisSet[i];
                        if ( (v in rows) == false) {
                            rows[v] = new Array();
                        }
                        rows[v].push(c);
                    }
                }

                render(rows, numberOfCols);
            }

            function csvToArray(tname) {
                var v = document.getElementById(tname).value;
                return v.split(',');
            }

            function render(rows, numberOfCols) {
                var tbl = document.getElementById('results');
                var newRow;
                var newCell;

                for (var v in rows) {
                    newRow = tbl.insertRow(-1);
                    for (var i=0; i < numberOfCols; i++) {
                        newCell = newRow.insertCell(i);
                        if (rows[v].indexOf(i+1) != -1) {
                            newCell.innerHTML = v;
                        }
                    }
                }
            }

        </script>
    </head>
    <body>
		<h1>CSV Compare</h1>
		<p>Click the compare button using provided sample data to see what happens. You'll get the idea.</p>
	    <!-- TODO: make number of columns variable -->
        <div style="display: inline-block;">Column 1<br/><textarea id="col1" style="height: 300px; width: 200px;">1,2,3</textarea></div>
        <div style="display: inline-block;">Column 2<br/><textarea id="col2" style="height: 300px; width: 200px;">0,2,3</textarea></div>
        <div style="display: inline-block;">Column 3<br/><textarea id="col3" style="height: 300px; width: 200px;">2,3</textarea></div>
        <div><input type="button" onclick="makeItSo();" value="compare"/></div>
        <div><table id="results" border="1"></table></div>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSV Compare</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
	<!-- Basic CSV comparison. Aligns all identical values from CSV strings into a table. --->

	function makeItSo() {
	var numberOfCols = 3; // Number of sets/columns we are working with
	var rows = {}; // Our final associative array/object to render
	var thisSet = []; // Our current working set of numbers
	var v; // temporarily holds a value of the set

	for (var c=1; c <= numberOfCols; c++) {
	// get array of number in the (col1, col2, col3, etc...) textarea
	thisSet = csvToArray("col"+c);
	thisSet.sort();

	for (var i=0; i < thisSet.length; i++) {
	v = thisSet[i];
	if ( (v in rows) == false) {
	rows[v] = new Array();
	}
	rows[v].push(c);
	}
	}

	render(rows, numberOfCols);
	}

	function csvToArray(tname) {
	var v = document.getElementById(tname).value;
	return v.split(',');
	}

	function render(rows, numberOfCols) {
	var tbl = document.getElementById('results');
	var newRow;
	var newCell;

	for (var v in rows) {
	newRow = tbl.insertRow(-1);
	for (var i=0; i < numberOfCols; i++) {
	newCell = newRow.insertCell(i);
	if (rows[v].indexOf(i+1) != -1) {
	newCell.innerHTML = v;
	}
	}
	}
	}

	</script>
	</head>
	<body>
	<h1>CSV Compare</h1>
	<p>Click the compare button using provided sample data to see what happens. You'll get the idea.</p>
	<!-- TODO: make number of columns variable -->
	<div style="display: inline-block;">Column 1<br/><textarea id="col1" style="height: 300px; width: 200px;">1,2,3</textarea></div>
	<div style="display: inline-block;">Column 2<br/><textarea id="col2" style="height: 300px; width: 200px;">0,2,3</textarea></div>
	<div style="display: inline-block;">Column 3<br/><textarea id="col3" style="height: 300px; width: 200px;">2,3</textarea></div>
	<div><input type="button" onclick="makeItSo();" value="compare"/></div>
	<div><table id="results" border="1"></table></div>

	</body>
	</html>