The goal here is to have Csv texts be represented in Html tables.
Javascript
|
function WriteCsvToTable(csvText,
TablePane) {
/*Variable Declaration*/
var
Rows = csvText.split("\n"), Html = [];
/*Loop that makes the rows
Each row is split with the mark of the
comma.
Then Joined to make the row
*/
for (var
ctr = 0; ctr < Rows.length; ctr++)
Html.push("<tr><td>" +
Rows[ctr].split(",").join("</td><td>") +
"</td></tr>");
Html = "<table>" +
Html.join("") + "</table>";
$(TablePane).html(Html);
}
/*Source http://jsfiddle.net/frvQ2/*/
|
The code above is the Javascript code that occurs during the
click event. It is important to know that the Javascript code above requires Jquery.
It is assumed that the “csvText” parameter matches the CSV format. The next
parameter is a string to be queried with jquery funtions. It is assumed both parameters matches the
format required of them.
The first line executed in the functions is Variable declaration.
The first variable is “Rows” which is an array generated from splitting the
lines of the csv text entered. The next variable starts as an empty array where
table related html elements are to be added.
The loop performs a one liner of code that adds content to
the Html array. Each element of the array contains multiple html elements (this
naming convention can be confusing). Each array element pushed starts with the "
"
_tags and ends with "
"
closing tags. What’s between them is a result of an array and string javascript
functions. The current element in the Row array represents the line in the csv
text. The current line is split with its commas (,). Each of those commas are
replaced with
tags. Henceforth, those texts before commas and the line break are now in a
table cell. "
_tags and ends with "
The Html array resulting from the loop is turned in to
string with the table opening and closing tags between the appended string
values from the Html array. This generates the final table code to be the
content of the pane specified in the TablePane parameter.
HTML
|
<div class="row">
<h1>Enter
Your CSV Here:</h1>
<textarea id="csv" class="text">
Id,Product Name,Price
1,Sailor Hat,$5
2,Old Rod,$50
3,Waffle Maker,$120</textarea>
</div>
<div class="row">
<a href="#TablePane" onclick="WriteCsvToTable($('#csv').val(),
'#TablePane')" class="btn
btn-primary">Generate Table</a>
</div>
<div class="row" id="TablePane">
</div>
|
The HTML code above contains a textbox where a user can
enter CSV texts. A button that will call the function that generates a table
representing the Csv specified upon click. There is also the panel where the
table will be shown.
CSS
|
#TablePane tr:nth-child(odd) td{
background:#beeab4;
}
#TablePane td {
border : thin black solid;
width:1%;
}
|
CSS can also be applied for the table’s looks.
The link below has the results of the script with a few UI related modifications. It's a page from an Microsoft Azure website using the free tier. Constant up time is not a guarantee.
No comments:
Post a Comment