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 1 of 1
  1. #1
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Example of a very basic inline table cell editor

    The example allows a textarea for the first column.
    In the second column we allow a simple textinput.
    The third column just shows one clickable image that is used like a checkbox.
    no other editing is allowed in her.
    Column four allows for a selection.

    This example could be extenden with some AJAX processing of the input
    values/events, like sending the new value to a backand script and so on.

    Just grab the source below and download the two images and have fun.




    Code:
    <table id="t" border="1" onclick="cell_edit()">
        <tr><th>Column 0</th><th>Column 1</th><th>column 2</th><th>Column 3</th></tr>
        <tr><td></td><td>2asasa</td><td>3asasa</td><td>4asasa</td></tr>
        <tr><td></td><td>2asasa</td><td><div align="center"><img name="no" src="yesred.jpg"> </div></td><td>Yes</td></tr>
        <tr><td>row1<br>row2</td><td>2asasa</td><td>3asasa3asasa3asasa3asasa</td><td>4asasa</td></tr>
        <tr><td></td><td>2asasa</td><td>3asasa</td><td></td></tr>
        <tr><td></td><td>2asasa</td><td>3asasa</td><td>4asasa</td></tr>
    </table>
    <script>
        
        var ri,ci,in_input=false;
        var obj=document.getElementById('t');
        
        function cell_edit(e)
        /********************/
        {
            var rows,nrows,cols,i,td,opt,sel,selval;
    	
            if (!e) {
                e = window.event;
            }
            td = (e.target) ? e.target : e.srcElement;       
            if(td.tagName!=='TD' && td.tagName!=='IMG'){ 
                return;
            }
    
    
            ///////////////////////////////////////////
            ///// any previous input to process
            ///////////////////////////////////////////
    
            if(in_input){
               
                if(ci===0){
                    obj.rows[ri].cells[ci].innerHTML=obj.rows[ri].cells[ci].childNodes[0].value.replace(/\n/g,"<br>");  
                } else if (ci===1){
                    obj.rows[ri].cells[ci].innerHTML=obj.rows[ri].cells[ci].childNodes[0].value;  
                } else if(ci===3){
                    opt=obj.rows[ri].cells[ci].childNodes[0].options;
                    sel=obj.rows[ri].cells[ci].childNodes[0].selectedIndex;
                    if(sel>=0){
                        obj.rows[ri].cells[ci].innerHTML=opt[sel].text;
                    } else {
                        obj.rows[ri].cells[ci].innerHTML='';
                    }
                }
            }
            in_input=false;
                        
            if(td.tagName!=='TD'){
                if(td.tagName!=='IMG'){                            
                    return;
                } else { 
                    ////////////////////////////////
                    // we use images as checkboxes
                    // process this immediatly
                    ////////////////////////////////
                    if(td.name==='no'){
                        td.name='yes';
                        td.alt='yes'
                        td.src='yesgreen.jpg';
                    }else {
                        td.name='no';
                        td.alt='no';
                        td.src='yesred.jpg';                
                    }
                    return;
                }
            }      
            ri=td.parentNode.rowIndex;
            ci=td.cellIndex;       
    
    
            ////////////////////////////////////////////////
            ////////// per column handling of input 
            //////////////////////////////////////////////////
    
    
            if(ci===0){
                ///////////////////////////
                ///// texarea //////////////
                ///////////////////////////
                rows=td.innerHTML.replace(/<br>/ig, "\n").split('\n');
                nrows=rows.length;
                cols,i;
                for(i=0,cols=0;i<nrows;i++){
                    if(rows[i].length>cols){
                        cols=rows[i].length;
                    }
                }
                td.innerHTML="<textarea  rows="+nrows+" cols="+cols+" >"+td.innerHTML.replace(/<br>/ig, "\n")+"</textarea>";
                in_input=true;
                td.childNodes[0].focus();
            } else if(ci===1 ){          
                /////////////////////////////////////////////
                ///// single line input field //////////////
                /////////////////////////////////////////////
                td.innerHTML="<input type=text size=10 amxlength=10 value='"+td.innerHTML+"'>";
                in_input=true;     
                td.childNodes[0].focus();
            } else if(ci===3){  
                ///////////////////////////////
                ///// selection  //////////////
                /////////////////////////////// 
                selval=td.innerHTML;
                td.innerHTML="<select name='top5' size='1'>"+
                    "<option>Michael Jackson</option>"+
                    "<option>Tom Waits</option>"+
                    "<option>Nina Hagen</option>"+
                    "<option>Yes</option>"+
                    "</select>";
                in_input=true;    
                td.childNodes[0].selectedIndex=set_selected_index(td.childNodes[0],selval);
            }              
        }
        function set_selected_index(gs,value)
        /************************************/
        {
            var n,opt,i;
    	
            // set the index to current field value
            opt=gs.options; // get the selection list
            n=opt.length;
            for(i=0;i<n;i++){
                if(opt[i].text===value){
                    return i; // this value is selected
                }
            }
            return -1; // no value form list selected
        }	
    </script>
    Some other code can be found here: http://hgsweb.de
    Attached Images Attached Images   


 

LinkBacks (?)


Tags for this Thread

Posting Permissions

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