...

View Full Version : Example of a very basic inline table cell editor



hgs
11-08-2011, 02:33 PM
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.






<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum