Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sort values inside textbox?

    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!

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Code:
    <!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>
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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" />.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    search for "tablesorter js"
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you could consider grabbing the values, sorting them and repopulating the table without actually moving the rows around...

    Code:
    <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>
    Last edited by xelawho; 09-24-2012 at 05:35 PM. Reason: playing around


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •