Skip to content

Add text table parser and table generator #146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
username1565 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add text table parser and table generator #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a43de5c
Rename jquery-latest.js to jquery-latest(not latest, v1.4.2).js
username1565 Aug 8, 2018
6ad32bb
Add latest uncompressed JQuery
username1565 Aug 8, 2018
27bc8da
Add table parser in index.html
username1565 Aug 8, 2018
a4b1d40
Fix many rows after reload table.
username1565 Aug 8, 2018
0fca43e
Add JSON supporting for table generator
username1565 Aug 9, 2018
fa75982
Add title for textarea about JSON format
username1565 Aug 9, 2018
61e5365
Set blue theme
username1565 Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 278 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
<head>
<link rel="stylesheet" href="./docs/css/jq.css" type="text/css" media="print, projection, screen">
<link rel="stylesheet" href="./themes/blue/style.css" type="text/css" media="print, projection, screen">

<script type="text/javascript" src="./jquery-3.3.1.js"></script>
<script type="text/javascript" src="./jquery.tablesorter.js"></script>
</head>

<body>
<a href="./docs/index.html">TableSorter documentations you can see here...</a>
<h2>Here you can generate the sortable table from text.</h2>
Enter the text-table, and delimiters:<br>


<textarea style="width: 800px; height: 150px;" name="text_table" placeholder="Type your text here!" id="text_table" oninput="show_hide_delimiters()"
title='JSON available... Format:
[
{"field1": "value 1.1", "field2": "value 1.2", "field3": 1.3},
{"field1": "value 2.1", "field2": "value 2.2", "field3": 2.3},
{"field1": "value 3.1", "field2":"value 3.2", "field3": 3.3}
]
'>
First Name_text Last Name_text Age_text Total_text Discount_text Difference_text Date_text
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Bruce Evans 22 $13.19 11% 0 Jan 18, 2007 9:12 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
</textarea><br>

<!--
<textarea style="width: 800px; height: 150px;" name="text_table" placeholder="Type your text here!" id="text_table" oninput="show_hide_delimiters();"
title='JSON available... Format:
[
{"field1": "value 1.1", "field2": "value 1.2", "field3": 1.3},
{"field1": "value 2.1", "field2": "value 2.2", "field3": 2.3},
{"field1": "value 3.1", "field2":"value 3.2", "field3": 3.3}
]
'
>
[
{
"First Name_JSON": "Bruce",
"Last Name_JSON": "Almighty",
"Age_JSON": 45,
"Total_JSON": "$153.19",
"Discount_JSON": "44.7%",
"Difference_JSON": 77,
"Date_JSON": "Jan 18, 2001 9:12 AM"
},
{
"First Name_JSON": "Bruce",
"Last Name_JSON": "Evan",
"Age_JSON": 22,
"Total_JSON": "$13.19",
"Discount_JSON": "11%",
"Difference_JSON": -100.9,
"Date_JSON": "Jan 18, 2007 9:12 AM"
},
{
"First Name_JSON": "Bruce",
"Last Name_JSON": "Evan",
"Age_JSON": 22,
"Total_JSON": "$13.19",
"Discount_JSON": "11%",
"Difference_JSON": 0,
"Date_JSON": "Jan 18, 2007 9:12 AM"
},
{
"First Name_JSON": "Clark",
"Last Name_JSON": "Kent",
"Age_JSON": 18,
"Total_JSON": "$15.89",
"Discount_JSON": "44%",
"Difference_JSON": -26,
"Date_JSON": "Jan 12, 2003 11:14 AM"
},
{
"First Name_JSON": "John",
"Last Name_JSON": "Hood",
"Age_JSON": 33,
"Total_JSON": "$19.99",
"Discount_JSON": "25%",
"Difference_JSON": 12,
"Date_JSON": "Dec 10, 2002 5:14 AM"
},
{
"First Name_JSON": "Peter",
"Last Name_JSON": "Parker",
"Age_JSON": 28,
"Total_JSON": "$9.99",
"Discount_JSON": "20.9%",
"Difference_JSON": 12.1,
"Date_JSON": "Jul 6, 2006 8:14 AM"
}
]
</textarea><br>
-->
<div id='div_row_delimiter' style="display: inline;">Rows delimiter<input type="text" id='row_delimiter' value="\n" size="35"></div>
<div id='div_cell_delimiter' style="display: inline;">Cell delimiter<input type="text" id='cell_delimiter' value="\t" size="35"></div>
<input type="button" id="submit_textarea" value="Generate SORTtable!" onclick="generate_table(); return false;"/>

<br><br>
<div id="table">
<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1"></table>
</div>

<script type="text/javascript">

function isJSON(str) {//isJSON string?
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}

function show_hide_delimiters(str){ //show/hide input fields for delimiters
try {
JSON.parse(document.getElementById('text_table').value);
} catch (e) {
document.getElementById('div_row_delimiter').style.display = 'inline';
document.getElementById('div_cell_delimiter').style.display = 'inline';
document.getElementById('submit_textarea').value = 'Generate SORTable from text!';
return false;
}
document.getElementById('div_row_delimiter').style.display = 'none';
document.getElementById('div_cell_delimiter').style.display = 'none';
document.getElementById('submit_textarea').value = 'Generate SORTable from JSON!';
return false;
}

function generate_table(){//generate the table
if(isJSON(document.getElementById('text_table').value)){//if JSON in textarea
var data = JSON.parse(document.getElementById('text_table').value); //parse this and push to data

$(document).ready(function () { //parse table from JSON and append to div

var html = '<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1" title="Generated, from JSON...">';
html += '<thead><tr class="header">';
var flag = 0;
$.each(data[0], function(index, value){
html += '<th>'+index+'</th>';
});
html += '</tr></thead>';
$.each(data, function(index, value){
if(index%2==0){html += '<tr class="even">';}
else{html += '<tr class="odd">';}
$.each(value, function(index2, value2){
html += '<td>'+value2+'</td>';
});
html += '</tr>';
});
html += '</table>';
$('#table').html(html);

$("#myTable").tablesorter(
{
sortList:[[0,0],[2,1]], //enable multisorting, 0 column by ascending, then 2 column by descending
widgets: ['zebra'] //enable autochange color for rows to save zebra style.
}
);
});
return false;
}else{//else, if text string and delimiters was been specified...
var text_table = document.getElementById('text_table');

var row_delimiter = (document.getElementById('row_delimiter')!==null)
? document.getElementById('row_delimiter').value
: '\n';

var cell_delimiter = (document.getElementById('cell_delimiter')!==null)
? document.getElementById('cell_delimiter').value
: '\t';

if(row_delimiter.indexOf('\\')===-1){row_delimiter = '\\'+row_delimiter+'\\';} //if this is one symbol, like ';' or ',' and not '\n' or '\t' - use this in RegExp
if(cell_delimiter.indexOf('\\')===-1){cell_delimiter = '\\'+cell_delimiter+'\\';} //or not...

var strings = []; //got rows
var re = new RegExp('\s*'+row_delimiter+'s*'); //make regular expression from string to split by rows.

//split by rows
if(text_table!==null){
//console.log(text_table.value); //show textarea value - test
strings = text_table.value.split(re);
}

var re2 = new RegExp('\s*'+cell_delimiter+'s*'); //make regexp from string to split by cells.
//split by cells
for(i=0;i<strings.length;i++){
strings[i] = strings[i].split(re2);
}

var myTable = document.getElementById('myTable');//get table element - to variable
if(myTable==null){
//create and append to document.
document.getElementById('table').innerHTML += '<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1"></table>';
//get again
var myTable = document.getElementById('myTable');//table element - to variable
}
else{//else fill this...
myTable.parentNode.removeChild(myTable);
document.getElementById('table').innerHTML += '<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1"></table>';
//get again empty table
var myTable = document.getElementById('myTable');//table element - to variable

if(myTable==null){throw new Error('no table found with id "myTable"');}
else{
var html = '';

//by rows
for(i=0; i<=strings.length;i++){
if(i==0){
html+='<thead>\n<tr>\n';
}
else if(strings[i]==""){continue;} //skip empty rows as empty element in array.
else{
if(i==1){
html+='</tr>\n</thead>\n<tbody>\n';
}
if(typeof strings[i] !== 'undefined'){
if(i%2==0){
html+='<tr class="odd">\n';
}
else if(typeof strings[i+1] !== 'undefined'){
html+='<tr class="even">\n';
}
}
else{
html+='</tbody>\n';
break;
}
}
//by cells.
for(j=0; j<strings[i].length; j++){
if(i==0){
html+='<th class="header">'+strings[i][j]+'</th>\n';
}
else if(j==0 && strings[i][j]===''){break;}
else if(j==strings[i].length-1){
html+='<td>'+strings[i][j]+'</td>\n</tr>\n';
}
else{
html+='<td>'+strings[i][j]+'</td>\n';
}
}
}
//console.log(html); //show in console an HTML code to appending - just test...

myTable.innerHTML = html; //add this as HTML code inside in table element.

//add title tooltip to the table.
myTable.setAttribute('title', 'Generated, according\n\
delimiter '+row_delimiter+' for rows,\n\
and delimiter '+cell_delimiter+' for cells...');

//now we can lounch a tablesorter... JQuery was been included earlier...
$(document).ready(function()
{
$("#myTable").tablesorter(
{
sortList:[[0,0],[2,1]], //enable multisorting, 0 column by ascending, then 2 column by descending
widgets: ['zebra'] //enable autochange color for rows to save zebra style.
}
);
}
);
}
}
return false;
}
}

</script>

</body>
Loading