www.webdeveloper.com
Results 1 to 3 of 3

Thread: Lock/Freeze columns using Javascript or JQuery

  1. #1
    Join Date
    Oct 2007
    Posts
    231

    Lock/Freeze columns using Javascript or JQuery

    I have a table of columns such as Name, Address, City, State, and ZIP. I want to edit entire columns depending on header selection using button. I couldn't find such requests from others. Is there a way this can be achieved either by Javascript or JQuery. Thank you.
    Last edited by codingisfun; 08-07-2013 at 02:53 PM.

  2. #2
    Join Date
    Mar 2009
    Posts
    501
    Here you go. Click on any of the headers to make the column editable. Click on it again when you're finished. You can run it on any table with headers but the number of columns in each row must match the number of headers. You can run it on multiple tables in the same document.
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <title>Table</title>
    <meta charset="utf-8">
    
    <script>
    function tableEdit(argId){
        var hd, i, len, numHdr, main, mod, td, obj, x;
        x = {};
        main = document.getElementById(argId);
        hd = main.getElementsByTagName('th');
        
        x.col = [];
        len = hd.length;
        numHdr = len;
        
        for(i = 0; i < len; i++){
    	obj = {};
    	obj.state = "off";
    	obj.under = [];
    	hd[i].onclick = function(obj){
    	    return function(){
    	    var i, len, content;
    	    if(obj.state == "off"){
    		len = obj.under.length;
    		for(i = 0; i < len; i++){
    		    content = obj.under[i].innerHTML;
    		    obj.under[i].innerHTML ='<input type="text">';
    		    obj.under[i].firstChild.value = content;
    		}
    		obj.state = "on";
    	    }
    	    else{
    		obj.state = "off";
    		len = obj.under.length;
    		for(i = 0; i < len; i++){
    		    content = obj.under[i].firstChild.value;
    		    obj.under[i].innerHTML = content;
    		}
    	    }
    	    }
    	}(obj);	
    	x.col.push(obj);
        }
        	    
        //now load the td's into the objects in x.col
         td = main.getElementsByTagName('td');
         len = td.length;
    
         mod = 0;
         for(i = 0; i < len; i++){
    	 x.col[mod].under.push(td[i]);
    	 mod++;
    	 if(mod == numHdr){
    	     mod = 0;
    	 }
         }
         return x;		    
    }
    	 
    window.onload = function(){
    tableEdit("t1");
    }
    
    </script>
    </head>
    <body>
    <table border="1" id="t1">
    <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    </tr>
    <tr>
    <td>10</td>
    <td>20</td>
    </tr>
    <tr>
    <td>30</td>
    <td>40</td>
    </tr>
    </table>
    </body>
    </html>

  3. #3
    Join Date
    Oct 2007
    Posts
    231
    Wow... you are genius. I was looking for this code for long time and even I searched on Google and I couldn't find the one suited me. This would work for me. Thank you.
    Last edited by codingisfun; 08-09-2013 at 03:36 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles