...

View Full Version : editable table row?



nikko50
10-22-2005, 01:31 AM
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

Basscyst
10-22-2005, 01:44 AM
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.




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);
}

fci
10-22-2005, 02:03 AM
here is a simplistic solution:

<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).

nikko50
10-22-2005, 02:56 AM
Awesome. How can I place a onBlur event so the textbox can go back to a field after the user is done editing??

fci
10-22-2005, 05:46 PM
<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum