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
    Regular Coder
    Join Date
    May 2004
    Posts
    388
    Thanks
    73
    Thanked 0 Times in 0 Posts

    editable table row?

    Hi all.
    I have a table rows with cells of data. At the end of the rows thre s a checkbox to edit. Is it possible that when the box is selected to make certain fields editable?? Any help would be great.
    Tracy

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Sure, you could swap out the content of the table cell with a input, then set the value of that input to the value of the table cell. I actually just did this today, it's not very adaptable, but it might point you in the right direction. At the start of the table I put a form tag, then I only allow one record to be edited at a time, so you can just submit the same form regardless of the record selected. If another record is clicked while one is open the first one is returned to regular table cells.

    Code:
    var lastobj=""
    
    var l_agent=new Array();
    function editAgent(a_name,a_mail,a_id,profile)
    {
    	if(lastobj!="")
    	{
    		while(lastobj.childNodes.length!=0)
    		{
    			lastobj.removeChild(lastobj.childNodes[0]);
    		}
    		lastobj.appendChild(l_agent[0]);
    		lastobj.appendChild(l_agent[1]);
    		lastobj.appendChild(l_agent[2]);
    		lastobj.appendChild(l_agent[3]);
    	}
    	if(addflg==1)
    	{
    		var trs=document.getElementById('tblbody').getElementsByTagName('tr');
    		document.getElementById('tblbody').removeChild(trs[trs.length-1]);
    		addflg=0;	
    	}
    	var obj=document.getElementById('tr'+a_id);
    	lastobj=obj;
    	var kids=obj.getElementsByTagName('td');
    	l_agent.length=0;
    	for(var i=0;i<kids.length;i++)
    	{
    		l_agent[l_agent.length]=kids[i];	
    	}
    	
    	var td1=document.createElement('td');
    	var td2=document.createElement('td');
    	var td3=document.createElement('td');
    	var td4=document.createElement('td');
    	
    	var input1=document.createElement('input');
    	input1.setAttribute("name","name");
    	input1.setAttribute("type","text");
    	input1.value=a_name;
    	
    	var input2=document.createElement('input');
    	input2.setAttribute("type","text");
    	input2.setAttribute("name","email");
    	input2.onchange=function()
    	{
    		document.getElementById('email_flg').value=1;
    	}
    	input2.value=a_mail;
    	
    	var input3=document.createElement('input');
    	input3.setAttribute("type","hidden");
    	input3.setAttribute("name","userid");
    	input3.value=a_id;
    	
    	var input4=document.createElement('input');
    	input4.setAttribute("type","hidden");
    	input4.setAttribute("name","email_flg");
    	input4.setAttribute("id","email_flg");
    	input4.value=0;
    	
    	var input5=document.createElement('input');
    	input5.setAttribute("type","hidden");
    	input5.setAttribute("name","y_ax");
    	if(document.documentElement.scrollTop)
    	{
    		input5.value=document.documentElement.scrollTop;
    	}
    	else
    	{
    		input5.value=document.body.scrollTop;	
    	}
    	
    	var sel = document.createElement('select');
    	sel.setAttribute('name','profile');
    	
    	sel.options[sel.options.length]=new Option('User','user');
    	sel.options[sel.options.length]=new Option('Admin','admin');
    	if(profile=="Admin")
    	{
    		sel.options[1].selected=true;	
    	}
    	
    	
    	var sub1=document.createElement("input");
    	sub1.setAttribute("type","image");
    	sub1.setAttribute("src","images/save.gif");
    	sub1.setAttribute('alt','Save');
    	sub1.className='imgbut';
    	sub1.onclick=function()
    	{
    		
    		var obj=document.forms[0];
    		var flg=0;
    		for(var i=0;i<obj.length;i++)
    		{
    			if(obj.elements[i].value.replace(/\s/g,'')=="")
    			{
    				flg=1;
    				obj.elements[i].style.borderColor='red';
    			}
    			else
    			{
    				obj.elements[i].style.borderColor='';
    			}
    		}
    		if(flg==1)
    		{
    			alert("Please fill out all provided fields.  Missing fields are marked in red.");
    			return false;
    		}
    		else
    		{
    			obj.submit();
    		}
    	}
    	
    	var can=document.createElement('input');
    	can.setAttribute('type','image');
    	can.setAttribute('src','images/delete.gif');
    	can.setAttribute('alt','Delete');
    	can.className='imgbut2';
    	can.style.cursor='pointer';
    	can.onclick=function()
    	{
    		canEmployee();
    		return false;
    	}
    	
    	while(obj.childNodes.length!=0)
    	{
    		obj.removeChild(obj.childNodes[0]);
    	}
    	
    	td1.appendChild(input1);
    	td2.appendChild(input2);
    	td2.appendChild(input3);
    	td2.appendChild(input4);
    	td2.appendChild(input5);
    	td3.appendChild(sel);
    	td4.appendChild(sub1);
    	td4.appendChild(can);
    	obj.appendChild(td1);
    	obj.appendChild(td2);
    	obj.appendChild(td3);
    	obj.appendChild(td4);
    }
    Last edited by Basscyst; 10-22-2005 at 01:47 AM.
    Helping to build a bigger box. - Adam Matthews

  • #3
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is a simplistic solution:
    Code:
    <table border="1">
    <tr><td class="editable">text1</td><td>text2</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    <tr><td>text3</td><td class="editable">text4</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    <tr><td class="editable">text5</td><td>text6</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    </table>
    <script type="text/javascript"><!--
    
    function edit_input(obj) {
        var is_checked = obj.checked;
        while (obj.tagName!='TR')
            obj = obj.parentNode;
    
        var td  = obj.getElementsByTagName('TD');
        var len = td.length;
    
        if (!is_checked) {
            
            for (var i=0; i<len; i++)
                if (td[i].className=='editable')
                    td[i].innerHTML = td[i].firstChild.value;
    
    
        } else {
    
            var input;
    
            for (var i=0; i<len; i++)
                if (td[i].className=='editable') {
                    input = document.createElement('INPUT');
                    input.value = td[i].innerHTML;
                    td[i].innerHTML = '';
                    td[i].appendChild(input);
                }
        }
                 
    }
    
    
    --></script>
    this of course doesn't handle updating on the fly to a db though .. (which you could do by tossing in some xmlhttprequests).
    Last edited by fci; 10-22-2005 at 02:18 AM.

  • #4
    Regular Coder
    Join Date
    May 2004
    Posts
    388
    Thanks
    73
    Thanked 0 Times in 0 Posts
    Awesome. How can I place a onBlur event so the textbox can go back to a field after the user is done editing??

  • #5
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table border="1">
    <tr><td class="editable">text1</td><td>text2</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    <tr><td>text3</td><td class="editable">text4</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    <tr><td class="editable">text5</td><td>text6</td><td><input type="checkbox" onclick="edit_input(this);">Edit</td></tr>
    </table>
    <script type="text/javascript"><!--
    function save_input(obj) {
        obj = obj.parentNode;
        obj.innerHTML = obj.firstChild.value;
    }
    function edit_input(obj) {
        var is_checked = obj.checked;
        while (obj.tagName!='TR')
            obj = obj.parentNode;
    
        var td  = obj.getElementsByTagName('TD');
        var len = td.length;
    
        if (is_checked) {
            var input;
    
            for (var i=0; i<len; i++)
                if (td[i].className=='editable') {
                    input = document.createElement('INPUT');
                    input.value = td[i].innerHTML;
                    input.onblur = function() { save_input(this); }
                    td[i].innerHTML = '';
                    td[i].appendChild(input);
                }
        }
                 
    }
    
    
    --></script>
    this uses an onblur event.


  •  

    Posting Permissions

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