mkaatman/csv2table.html

## csv2table.html
<!-- http://jsfiddle.net/vHQwN/8/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Convert CSV to Table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
/* CSS source: http://24ways.org/2009/have-a-field-day-with-html5-forms */
    html, body, h1, form, fieldset, legend, ol, li {
    margin: 0;
    padding: 0;
    }
    body {
    background: #ffffff;
    color: #111111;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding: 20px;
    }

    form {
    background: #9cbc2c;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 400px;
    }

    form fieldset {
    border: none;
    margin-bottom: 10px;
    }
    form fieldset:last-of-type {
    margin-bottom: 0;
    }

    form legend {
    color: #384313;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
    }

    form> fieldset > legend:before {
    content: "Step " counter(fieldsets) ": ";
    counter-increment: fieldsets;
    }


    form fieldset fieldset legend {
    color: #111111;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
    }


    form ol li {
    background: #b9cf6a;
    background: rgba(255,255,255,.3);
    border-color: #e3ebc3;
    border-color: rgba(255,255,255,.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
    }
    form ol ol li {
    background: none;
    border: none;
    float: left;
    }

    form label {
    float: left;
    font-size: 13px;
    width: 110px;
    }
    form fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
    }
    form label[for=visa] {
    background-image: url(visa.gif);
    }
    form label[for=amex] {
    background-image: url(amex.gif);
    }
    form label[for=mastercard] {
    background-image: url(mastercard.gif);
    }
    form fieldset fieldset label:hover {
    cursor: pointer;
    }

    form input:not([type=radio]),
    form textarea {
    background: #ffffff;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    font: italic 13px Georgia, "Times New Roman", Times, serif;
    outline: none;
    padding: 5px;
    width: 200px;
    }
    form input:not([type=submit]):focus,
    form textarea:focus {
    background: #eaeaea;
    }
    form input[type=radio] {
    float: left;
    margin-right: 5px;
    }

    form button {
    background: #384313;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #ffffff;
    display: block;
    font: 18px Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
    }
    form button:hover {
    background: #1e2506;
    cursor: pointer;
    }

</style>
</head>
<body>
<p>Convert from CSV data to DITA XML Table</p>
<p>Known issues:
    <ol style="margin-left:30px">
    <li>Assumes that there are no commas in the actual data</li>
    <li>Doesn't handle quoted data, probably should to cover item 1.</li>
    <li>Does no error checking. Garbage in, garbage out!</li>
    </ol></p>
<form>
    <fieldset>
        <legend>Input Data</legend>
        <ol>
            <li>
                <label
                    for="title">Title</label>
                <input
                    type="text"
                    id="title" />
            </li>
            <li>
                <label
                    for="input">CSV</label>
                <textarea
                    id="input"></textarea>
            </li>
        </ol>
    </fieldset>
</form>
<br />
XML Output: (click to select)
<div id="output"><pre id="result"></pre></div>
<script type="text/javascript">
function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}
var render = function() {
    var output = "<table>\r\n";
    output+='<title>'+$('#title').val()+'</title>\r\n';
    output+='<tgroup cols="'+$("#input").val().split("\n")[0].split(",").length+'">\r\n';
    output+='<tbody>\r\n';
    output+= $("#input").val().split("\n").map(function(line) {
            return "<row><entry>" + line.split(",").join("</entry><entry>") + "</entry></row>\r\n";
        }).join("");
    output+='</tbody>';
    output+='</tgroup>';
    output+= "</table>\r\n";

    var result = $("#result");
    result.text(output);
};

$('#title').change(render);
$('#input').change(render);

$(function() {
    $('#output').click(function() {
        SelectText('output');
    });
});

</script>
</body>
</html>
	<!-- http://jsfiddle.net/vHQwN/8/ -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Convert CSV to Table</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<style>
	/* CSS source: http://24ways.org/2009/have-a-field-day-with-html5-forms */
	html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
	}
	body {
	background: #ffffff;
	color: #111111;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 20px;
	}

	form {
	background: #9cbc2c;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 20px;
	width: 400px;
	}

	form fieldset {
	border: none;
	margin-bottom: 10px;
	}
	form fieldset:last-of-type {
	margin-bottom: 0;
	}

	form legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #c0d576;
	}

	form> fieldset > legend:before {
	content: "Step " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}


	form fieldset fieldset legend {
	color: #111111;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 0;
	}


	form ol li {
	background: #b9cf6a;
	background: rgba(255,255,255,.3);
	border-color: #e3ebc3;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	}
	form ol ol li {
	background: none;
	border: none;
	float: left;
	}

	form label {
	float: left;
	font-size: 13px;
	width: 110px;
	}
	form fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
	}
	form label[for=visa] {
	background-image: url(visa.gif);
	}
	form label[for=amex] {
	background-image: url(amex.gif);
	}
	form label[for=mastercard] {
	background-image: url(mastercard.gif);
	}
	form fieldset fieldset label:hover {
	cursor: pointer;
	}

	form input:not([type=radio]),
	form textarea {
	background: #ffffff;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	outline: none;
	padding: 5px;
	width: 200px;
	}
	form input:not([type=submit]):focus,
	form textarea:focus {
	background: #eaeaea;
	}
	form input[type=radio] {
	float: left;
	margin-right: 5px;
	}

	form button {
	background: #384313;
	border: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
	color: #ffffff;
	display: block;
	font: 18px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	margin: auto;
	padding: 7px 25px;
	text-shadow: 0 1px 1px #000000;
	text-transform: uppercase;
	}
	form button:hover {
	background: #1e2506;
	cursor: pointer;
	}

	</style>
	</head>
	<body>
	<p>Convert from CSV data to DITA XML Table</p>
	<p>Known issues:
	<ol style="margin-left:30px">
	<li>Assumes that there are no commas in the actual data</li>
	<li>Doesn't handle quoted data, probably should to cover item 1.</li>
	<li>Does no error checking. Garbage in, garbage out!</li>
	</ol></p>
	<form>
	<fieldset>
	<legend>Input Data</legend>
	<ol>
	<li>
	<label
	for="title">Title</label>
	<input
	type="text"
	id="title" />
	</li>
	<li>
	<label
	for="input">CSV</label>
	<textarea
	id="input"></textarea>
	</li>
	</ol>
	</fieldset>
	</form>
	<br />
	XML Output: (click to select)
	<div id="output"><pre id="result"></pre></div>
	<script type="text/javascript">
	function SelectText(element) {
	var doc = document;
	var text = doc.getElementById(element);
	if (doc.body.createTextRange) { // ms
	var range = doc.body.createTextRange();
	range.moveToElementText(text);
	range.select();
	} else if (window.getSelection) {
	var selection = window.getSelection();
	var range = doc.createRange();
	range.selectNodeContents(text);
	selection.removeAllRanges();
	selection.addRange(range);

	}
	}
	var render = function() {
	var output = "<table>\r\n";
	output+='<title>'+$('#title').val()+'</title>\r\n';
	output+='<tgroup cols="'+$("#input").val().split("\n")[0].split(",").length+'">\r\n';
	output+='<tbody>\r\n';
	output+= $("#input").val().split("\n").map(function(line) {
	return "<row><entry>" + line.split(",").join("</entry><entry>") + "</entry></row>\r\n";
	}).join("");
	output+='</tbody>';
	output+='</tgroup>';
	output+= "</table>\r\n";

	var result = $("#result");
	result.text(output);
	};

	$('#title').change(render);
	$('#input').change(render);

	$(function() {
	$('#output').click(function() {
	SelectText('output');
	});
	});

	</script>
	</body>
	</html>