Sort values inside textbox?

john6

09-24-2012, 10:20 AM

I've got a table with several rows/columns. Inside the table are textboxes which user can type stuff into.

Is it possible to sort (alphabetically) the columns based on the data stored inside those textboxes?

If so how?

Thanks!

rnd me

09-24-2012, 11:29 AM

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>csv sort and save </title>
<style>

html, body { margin: 0; padding: 0; background: aliceblue; font-family: monospace; font-size: 20px; }
textarea { width: 47.5%; float: left; margin: 1%; }

#IN{display: inline-block;} #BUTTON{display: inline-block;}
</style>

</head>
<body onload='main()' id="body">
<noscript style="color:#FF0000; font-size:66px; text-align:center; font-weight:bold">
This App Requires JavaScript, Enable scripting to use.
</noscript>

<h1>Load...</h1>

<button id="BUTTON" onclick="main()"> Apply </button>

<br />

<label class='box'><b class='title'></b>
<textarea class="textbox" rows="35" name="IN" id="IN" cols="80" onchange="IN.title=IN.value.length+' Bytes.';return true; " tabindex="1" >Rank,Place,State,Census,Estimates Base,2010,2011,0,0,0,0
1,New York city,New York,8,175,133,8,175,133,8,186,443,8,244,910,0,0,0,0
2,Los Angeles city,California,3,792,621,3,792,625,3,795,761,3,819,702,0,0,0,0
3,Chicago city,Illinois,2,695,598,2,695,598,2,698,283,2,707,120,0,0,0,0
4,Houston city,Texas,2,099,451,2,099,430,2,108,278,2,145,146,0,0,0,0
5,Philadelphia city,Pennsylvania,1,526,006,1,526,006,1,528,074,1,536,471,0,0,0,0
6,Phoenix city,Arizona,1,445,632,1,445,656,1,448,531,1,469,471,0,0,0,0
7,San Antonio city,Texas,1,327,407,1,327,606,1,334,431,1,359,758,0,0,0,0
8,San Diego city,California,1,307,402,1,307,406,1,311,516,1,326,179,0,0,0,0
9,Dallas city,Texas,1,197,816,1,197,816,1,201,715,1,223,229,0,0,0,0
10,San Jose city,California,945,942,952,612,955,091,967,487,0,0,0,0</textarea>
</label>

<script type="text/late" id="late">

function parse(str, SEP){
var stack=[], ob=[], float="", inQuotes=false;
function addCell(){ ob.push(cast(float.trim())); float=""; }
function cast(v){var builtIn=cast.lut[v];return !isNaN(Number(v))? Number(v): (builtIn!==undefined?builtIn:v)||"";};
cast.lut=({ 'true':true, 'false':false,"":null});
for( var i=0; i<str.length;i++){
var it=str[i];
if(it==='"'){ inQuotes=!inQuotes; if(str[i-1]==='"'){ float+='"';} continue; }
if(it===SEP){ if(!inQuotes){addCell();}else{float+=SEP;} continue;}
if(it==="\n"){ addCell(); stack.push(ob); ob=[]; continue;}
float+=it;
}
addCell();
stack.push(ob);
return stack;
}

function obMap(ob) {var r = [];var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {r[i++] = [z, ob[z]];}}return r;}

function el(tid) { return document.getElementById(tid);}

function sortCol(column){
return function(a,b){return a[column]>b[column]?1:-1;}
}

function resort(col){ //can pass in col # here, otherwise itt'l ask

var seperator=",";
var r=parse(IN.value, seperator);
var h=r[0];
r=r.slice(1);

col= col|| prompt("Enter column number\n\n" + obMap(h.filter(Boolean)).join("\n"), sortCol.col|| 1 )||0;

col*=1;
//sort by given column:
r.sort().sort( sortCol( col ) );

//flip if column's sort is repeated
if(window.lastOne==col){
r.reverse(); window.lastOne=-1;
}else{ window.lastOne=col; }

//re-build the output
IN.value=
h.join(seperator)+"\n"+
r.map(function(a){ return a.join(seperator) })
.join("\n");
}

if(window.booted){
resort();
}else{
window.booted=true;
}

</script>
<script>

IN=el("IN");

function el(tid) { return document.getElementById(tid);}

window.main=function () {

eval(el("late").textContent);

};

</script>

</body>
</html>

john6

09-24-2012, 11:35 AM

Uh.. Sorry, that's not what I mean..

I've basically got a table with field headings, and I want the data under those fields sorted - problem is the data is not static text, but text inside inputboxes such as <input type="text" />.

rnd me

09-24-2012, 03:55 PM

search for "tablesorter js"

xelawho

09-24-2012, 05:16 PM

you could consider grabbing the values, sorting them and repopulating the table without actually moving the rows around...

<body>
<table width="75%" id="mytab" border="1">
<tr>
<td>Name<select id="names" onchange="sortEm(this)">
<option value="">- sort by name-</option>
<option value="asc">Ascending</option>
<option value="des">Descending</option>
</select></td>
<td>Age<select id="age" onchange="sortEm(this)">
<option value="">- sort by age -</option>
<option value="asc">Ascending</option>
<option value="des">Descending</option>
</select></td>
<td>Job<select id="job" onchange="sortEm(this)">
<option value="">- sort by job-</option>
<option value="asc">Ascending</option>
<option value="des">Descending</option>
</select></td>
</tr>
<tr>
<td>Charles</td>
<td><input type="text" value="32"></td>
<td><input type="text" value="manager"></td>
</tr>
<tr>
<td>Bob</td>
<td><input type="text" value="56"></td>
<td><input type="text" value="accountant"></td>
</tr>
<tr>
<td>Jim</td>
<td><input type="text" value="44"></td>
<td><input type="text" value="secretary"></td>
</tr>
</table>
<script>
function sortEm(sel){
var meth=sel.value;
var tmp=[];
if (sel.value==""){return}
var tab=document.getElementById("mytab");
for (var i = 1; i < mytab.rows.length; i++) {
deets={names:mytab.rows[i].cells[0].innerHTML,
age:mytab.rows[i].cells[1].children[0].value,
job:mytab.rows[i].cells[2].children[0].value
}
tmp.push(deets)
}
switch(sel.id){
case "age":
if (meth=="asc"){
tmp.sort(function(a, b){
return a.age-b.age
})
} else {
tmp.sort(function(a, b){
return b.age-a.age
})
}
break;
default:
if (meth=="asc"){
tmp.sort(function(a, b){
if (a[sel.id] < b[sel.id]) //sort string ascending
return -1
if (a[sel.id] > b[sel.id])
return 1
})
} else {
tmp.sort(function(a, b){
if (a[sel.id] > b[sel.id]) //sort string ascending
return -1
if (a[sel.id] < b[sel.id])
return 1
})
}
break;
}
for (var i = 1; i < mytab.rows.length; i++) {
mytab.rows[i].cells[0].innerHTML=tmp[i-1].names;
mytab.rows[i].cells[1].children[0].value=tmp[i-1].age;
mytab.rows[i].cells[2].children[0].value=tmp[i-1].job;
}
}
</script>
</body>