?
Solved

inline table edit

Posted on 2008-02-11
21
Medium Priority
?
2,845 Views
Last Modified: 2012-05-05
I have a table with many rows and columns. I want to edit the fields inline.
i want to edit the first column using textbox edit. when i click on the first column cells, it should become a textbox with the value filled in, once i blurout i should have the edited value.
same way with textarea, dropdown,listbox,checkbox and radio. for testing purpose u can have any values for dropdown, listbox, radio and checkboxes.

also finally i want to submit the form to pass all the values.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 
 <BODY>
 <form name="t1">
  <TABLE cellspacing="1" cellpadding="2" border="1" width="600">  
	  <TR>
		<Th>Textbox Edit</Th>
		<Th>Textarea Edit</Th>
		<Th>Dropdown Edit</Th>
		<Th>Listbox Edit</Th>
		<Th>checkbox Edit</Th>
		<Th>radio Edit</Th>
	  </TR>
	  <TR>
		<TD>orange1</TD>
		<TD>apple1</TD>
		<TD>tomato1</TD>
		<TD>pine1</TD>
		<TD>grape1</TD>
		<TD>stone1</TD>
	  </TR>
	  <TR>
		<TD>orange2</TD>
		<TD>apple2</TD>
		<TD>tomato2</TD>
		<TD>pine2</TD>
		<TD>grape2</TD>
		<TD>stone2</TD>
	  </TR>
	   <TR>
		<TD>orange3</TD>
		<TD>apple3</TD>
		<TD>tomato3</TD>
		<TD>pine3</TD>
		<TD>grape3</TD>
		<TD>stone3</TD>
	  </TR>
  </TABLE>
  <br />
  <INPUT TYPE="submit" value="submit">
  </form>
 </BODY>
</HTML>

Open in new window

0
Comment
Question by:vidhubala
  • 9
  • 5
  • 5
  • +1
20 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 20874235
0
 
LVL 30

Expert Comment

by:third
ID: 20881192
also look at extjs framework. try to browse some of their examples.  www.extjs.com
0
 
LVL 17

Assisted Solution

by:gops1
gops1 earned 1000 total points
ID: 20881242
here is something you can try out:
<html>
	<head>
		<title>Script Demo Gops</title>
		<style>body, table,input, select,span, textarea{font-family:verdana;font-size:xx-small;}</style>
		<script language="javascript">
			function editFields(){
				var t=document.getElementById('edttbl');
				for(var i=1;i<t.rows.length;i++){
					for(j=0;j<t.rows[i].cells.length;j++){
						if(j==0){
							var c=t.rows[i].cells[j].innerHTML;
							t.rows[i].cells[j].innerHTML="";
							var o=document.createElement('input');
							o.name="col_"+i+"_"+j;
							o.value=c;
							t.rows[i].cells[j].appendChild(o);
						}
						if(j==1){
							var c=t.rows[i].cells[j].innerHTML;
							t.rows[i].cells[j].innerHTML="";
							var o=document.createElement('textarea');
							o.name="col_"+i+"_"+j;
							o.value=c;
							t.rows[i].cells[j].appendChild(o);
						}
					}
				}
				document.getElementById('sub').style.display='inline';
				document.getElementById('edt').style.display='none';
			}
        </script>
     </head>
<body>
	<form name="t1">
	<table cellspacing="1" cellpadding="2" border="1" width="600" id="edttbl">
		<tr>
			<th>textbox edit</th>
			<th>textarea edit</th>
			<th>dropdown edit</th>
			<th>listbox edit</th>
			<th>checkbox edit</th>
			<th>radio edit</th>
		</tr>
		<tr>
			<td>orange1</td>
			<td>apple1</td>
			<td>tomato1</td>
			<td>pine1</td>
			<td>grape1</td>
			<td>stone1</td>
		</tr>
		<tr>
			<td>orange2</td>
			<td>apple2</td>
			<td>tomato2</td>
			<td>pine2</td>
			<td>grape2</td>
			<td>stone2</td>
		</tr>
		<tr>
			<td>orange3</td>
			<td>apple3</td>
			<td>tomato3</td>
			<td>pine3</td>
			<td>grape3</td>
			<td>stone3</td>
		</tr>
	</table>
	<br />
	<span id="sub" style="display:none"><input type="submit" value="submit"></span>
	<span id="edt"><input type="button" value="Edit" onclick="editFields()"></span>
	</form>
</body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:vidhubala
ID: 20886674
well, good try. but this is not what i wanted. having edit buttons outside is entirely a diff mechanism.

thanks
0
 
LVL 17

Expert Comment

by:gops1
ID: 20886822
so what are you asking for?
0
 
LVL 17

Expert Comment

by:gops1
ID: 20886827
ok got it
0
 
LVL 17

Expert Comment

by:gops1
ID: 20886939
Here is it with some changes. Hope this is what you are looking for:
<html>
	<head>
		<title>Script Demo Gops</title>
		<style>body, table,input, select,span, textarea{font-family:verdana;font-size:xx-small;}</style>
		<script language="javascript">
			function editFields(o){
				var t=document.getElementById('edttbl');
				var c=(o.parentNode.cellIndex);
				for(var i=1;i<t.rows.length;i++){
					if(c==0){
						var tx=t.rows[i].cells[c].innerHTML;
						t.rows[i].cells[c].innerHTML="";
						var o=document.createElement('input');
						o.name="col_"+i+"_"+c;
						o.value=tx;
						t.rows[i].cells[c].appendChild(o);
					}
					if(c==1){
						var tx=t.rows[i].cells[c].innerHTML;
						t.rows[i].cells[c].innerHTML="";
						var o=document.createElement('textarea');
						o.name="col_"+i+"_"+c;
						o.value=tx;
						t.rows[i].cells[c].appendChild(o);
					}
				}
				document.getElementById('sub').style.display='inline';
			}
        </script>
     </head>
<body>
	<form name="t1">
	<table cellspacing="1" cellpadding="2" border="1" width="600" id="edttbl">
		<tr>
			<th>textbox <a href="#" onclick="editFields(this);return false;">edit</a></th>
			<th>textarea <a href="#" onclick="editFields(this);return false;">edit</a></th>
			<th>dropdown edit</th>
			<th>listbox edit</th>
			<th>checkbox edit</th>
			<th>radio edit</th>
		</tr>
		<tr>
			<td>orange1</td>
			<td>apple1</td>
			<td>tomato1</td>
			<td>pine1</td>
			<td>grape1</td>
			<td>stone1</td>
		</tr>
		<tr>
			<td>orange2</td>
			<td>apple2</td>
			<td>tomato2</td>
			<td>pine2</td>
			<td>grape2</td>
			<td>stone2</td>
		</tr>
		<tr>
			<td>orange3</td>
			<td>apple3</td>
			<td>tomato3</td>
			<td>pine3</td>
			<td>grape3</td>
			<td>stone3</td>
		</tr>
	</table>
	<br />
	<span id="sub" style="display:none"><input type="submit" value="submit"></span>
	</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:vidhubala
ID: 20887019
sorry gops. i need to edit the fields by clicking on them right there not any link thats outside the cell.
may be let me give u something little bit later today on what i have so far now and we can figure out the rest?

thanks
0
 
LVL 17

Expert Comment

by:gops1
ID: 20887247
Fine, you can still have a look at this, meanwhile I will see your code tomorrow
<html>
	<head>
		<title>Script Demo Gops</title>
		<style>body, table,input, select,span, textarea{font-family:verdana;font-size:xx-small;}</style>
		<script language="javascript">
			function editFields(o){
				var t=document.getElementById('edttbl');
				var c=(o.cellIndex);
				var ro=(o.parentNode.rowIndex);
				if(c==0){
 
					var tx=t.rows[ro].cells[c].innerHTML;
					t.rows[ro].cells[c].innerHTML="";
					var o=document.createElement('input');
					o.name="col_"+ro+"_"+c;
					o.value=tx;
					t.rows[ro].cells[c].appendChild(o);
				}
				if(c==1){
					var tx=t.rows[ro].cells[c].innerHTML;
					t.rows[ro].cells[c].innerHTML="";
					var o=document.createElement('textarea');
					o.name="col_"+ro+"_"+c;
					o.value=tx;
					t.rows[ro].cells[c].appendChild(o);
				}
				document.getElementById('sub').style.display='inline';
			}
        </script>
     </head>
<body>
	<form name="t1">
	<table cellspacing="1" cellpadding="2" border="1" width="600" id="edttbl">
		<tr>
			<th>textbox</th>
			<th>textarea</th>
			<th>dropdown edit</th>
			<th>listbox edit</th>
			<th>checkbox edit</th>
			<th>radio edit</th>
		</tr>
		<tr>
			<td onclick="editFields(this);return false;">orange1</td>
			<td onclick="editFields(this);return false;">apple1</td>
			<td>tomato1</td>
			<td>pine1</td>
			<td>grape1</td>
			<td>stone1</td>
		</tr>
		<tr>
			<td onclick="editFields(this);return false;">orange2</td>
			<td onclick="editFields(this);return false;">apple2</td>
			<td>tomato2</td>
			<td>pine2</td>
			<td>grape2</td>
			<td>stone2</td>
		</tr>
		<tr>
			<td onclick="editFields(this);return false;">orange3</td>
			<td onclick="editFields(this);return false;">apple3</td>
			<td>tomato3</td>
			<td>pine3</td>
			<td>grape3</td>
			<td>stone3</td>
		</tr>
	</table>
	<br />
	<span id="sub" style="display:none"><input type="submit" value="submit"></span>
	</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:vidhubala
ID: 20887560
not what i wanted. i will send my code later.

thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20889610
0
 

Author Comment

by:vidhubala
ID: 20889978
yes i looked at it..
is it easy that way to create different form element types for editing values?
i see only one textbox edit example in the above url.

thanks
0
 

Author Comment

by:vidhubala
ID: 20906944
hi

please look at what i have done so far.
i am using a js file - inlineeditor.js.

i am able to to do inline edit for dropdown and listbox (working in firefox only), for drop downs i didnt like the way i implemented it, i want it to be done as an array of values as choices. i havent done for checkbox and radio.

i do not need for textbox and textarea.

thanks
html
-----------------------------------------------------------------------
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <script type="text/javascript" src="inlineeditor.js"></script>
 </HEAD>
 <BODY>
 <form name="t1">
  <TABLE cellspacing="1" cellpadding="2" border="1" width="600">  
	  <TR>
		<Th>by Dropdown Edit</Th>
		<Th>by Listbox Edit</Th>
		<Th>by checkbox Edit</Th>
		<Th>by radio Edit</Th>
	  </TR>
	  <TR>
		<TD><span class="editable drop1">tomato1</span></TD>
		<TD><span class="editable list">pine1</span>
			<span style="display:none">pine1, tomato1, orange1</span>
		</TD>
		<TD>grape1</TD>
		<TD>stone1</TD>
	  </TR>
	  <TR>
		<TD><span class="editable drop2">tomato2</span></TD>
		<TD>pine2</TD>
		<TD>grape2</TD>
		<TD>stone2</TD>
	  </TR>
	   <TR>
		<TD>tomato3</TD>
		<TD>pine3</TD>
		<TD>grape3</TD>
		<TD>stone3</TD>
	  </TR>
  </TABLE>
  <br />
  <INPUT TYPE="submit" value="submit">
  </form>
 </BODY>
</HTML>
-----------------------------------------------------------------------
inlineeditor.js
-----------------------------------------------------------------------
 
/**
 * Class: InlineEditor
 *
 * Version 0.1 (pending)
 *
 * License: Public Domain
 *
 *
 * User-overridable functions:
 * More documentation further down in code.
 *
 *    InlineEditor.customEditor      = function( theElement ) { ...
 *    InlineEditor.editorValue    = fuction( theEditor ) { ...
 *    InlineEditor.elementValue   = function( theElement ) { ...
 *    InlineEditor.elementChanged = function( theElement, oldVal, newVal ) { ...
 *
 *
 * Key CSS class names:
 *    editable:   Tables with this class will have their 'td' cells made editable.
 *    uneditable: At event time, cells with this class will NOT be editable.
 *    editing:    When editing, the 'td' element will have this class.
 *
 *
 * Useful utility functions:
 *
 *    InlineEditor.addClass( element, classname )
 *        Adds classname to the 'class' attribute of the element.
 *
 *    InlineEditor.removeClass( element, classname )
 *        Removes classname from the 'class' attribute of the element.
 *
 *    InlineEditor.checkClass( element, classname )
 *        True if class attribute of the element contains classname, false otherwise.
 *
 *    InlineEditor.swapClass( element, classname1, classname2 )
 *        Replaces classname1 with classname2 in class attribute of the element.
 *
 *     InlineEditor.columnNumer( cell )
 *        Returns column number of cell (zero index) or -1 if there are problems.
 *
 *     InlineEditor.rowNumer( cell )
 *        Returns row number of cell (zero index) or -1 if there are problems.
 *
 *     InlineEditor.rowID( cell )
 *        Returns row ID, useful if you use that to tie to a database primary key.
 *
 *
 * Change Log:
 *
 *    v0.1.1 - More reliable window.onload event adding. Added customEditor
 *             extensible function.
 *    v0.1 - Initial release.
 *
 *
 * Author:
 *
 *    Robert Harder
 *    rharder # users,sf,net
 */
 
/** Global var to test for IE */
var inlineeditor_isIE = ( navigator.userAgent.toLowerCase().search( 'msie' ) != -1 && navigator.userAgent.toLowerCase().search( 'opera' ) == -1 ) ? true : false;
 
var InlineEditor = {
 
/* ********  F U N C T I O N S   Y O U   M I G H T   C A L L  ******** */
 
 
    alreadyInited : false,  // In case we get called twice.
 
 
 
    /**
     * This should be called automatically when the page loads,
     * but if you also are setting up a function to run on
     * window.onload then this might get bumped out of position.
     * If that's the case, then make sure you call InlineEditor.init()
     * yourself.
     *
     * If you create some nodes programmatically, you can also rerun
     * this code to scan for "editable" classes. Like this:
     *
     * var foo document.createElement('div');
     * foo.className = 'editable';
     * ...
     * InlineEditor.init( foo );
     */
    init: function( arg )
    {
        // What is the arg?
        var isNode  = false;
        var isEvent = false;
        if( arg.nodeType )
            isNode = true;
 
        // If we're already inited and we're not being asked to
        // init a new a node, bail out.
        if( !isNode && InlineEditor.alreadyInited )
            return;
 
        // Find all elements with class 'editable' and make them editable
        var rootEl = isNode ? arg : document;
        var allEl = rootEl.getElementsByTagName('*');
        for (var i= 0; i < allEl.length; i++ ){
            if( InlineEditor.checkClass( allEl[i], 'editable' ) ){
 
                switch( allEl[i].tagName ){
 
                    // For tables, set up individual cells.
                    case 'TABLE':
                        var tds = allEl[i].getElementsByTagName( 'td' );
                        for( var j = 0; j < tds.length; j++ )
                            InlineEditor.recursiveAddOnClickHandler( tds[j] );
                        break;
 
                    // Default behavior is to set up all editable elements
                    // which requires setting up all its children elements.
                    // This shouldn't be necessary, but these 'dblclick' events
                    // don't seem to propagate through the elements  to parents.
                    default:
                        InlineEditor.recursiveAddOnClickHandler( allEl[i] );
                }   // end switch: tagname
 
 
            }   // end if: editable
        }   // end for: each element
 
        if( !isNode )
            InlineEditor.alreadyInited = true;
    },  // end init
 
 
 
    addClass:    function(o,c)     { return InlineEditor.jscss('add',o,c); },
    removeClass: function(o,c)     { return InlineEditor.jscss('remove',o,c); },
    checkClass:  function(o,c)     { return InlineEditor.jscss('check',o,c); },
    swapClass:   function(o,c1,c2) { return InlineEditor.jscss('swap',o,c1,c2); },
 
 
    /**
     * Return the column number, if a table cell.
     */
    columnNumber: function( cell )
    {
        // Ensure we have a 'td' cell
        if( cell.nodeType != 1    ) return -1;
        if( cell.tagName  != 'TD' ) return -1;
 
        // Find cell and return column number
        if( !cell.parentNode || cell.parentNode.tagName != 'TR' ) return -1;
        var tr  = cell.parentNode;
        var tds = tr.getElementsByTagName('TD');
        for( var i = 0; i < tds.length; i++ )
            if( tds[i] == cell )
                return i;
 
        return -1;
    },  // end columnNumber
 
 
    /**
     * Return the row number, based on the row's immediate
     * parent, which may be a 'tbody' or the actual 'table'.
     */
    rowNumber: function( cell )
    {
        // Ensure we have a 'td' cell
        if( cell.nodeType != 1    ) return -1;
        if( cell.tagName  != 'TD' ) return -1;
 
        // Find cell's parent row and return row number
        if( !cell.parentNode || cell.parentNode.tagName != 'TR' ) return -1;
        var tr  = cell.parentNode;
        var trs = tr.parentNode.childNodes;
        for( var i = 0; i < trs.length; i++ )
            if( trs[i] == tr )
                return i;
 
        return -1;
    },  // end rowNumber
 
 
 
    /**
     * Returns the ID of the parent row. Useful if you use
     * that to track the row to some sort of database primary key.
     */
    rowID: function( cell )
    {
        // Ensure we have a 'td' cell
        if( cell.nodeType != 1    ) return -1;
        if( cell.tagName  != 'TD' ) return -1;
 
        if( !cell.parentNode || cell.parentNode.tagName != 'TR' ) return -1;
        var tr = cell.parentNode;
        return tr.id;
    },  // end rowID
 
 
    sizeTo: function( changeMe, model )
    {
        changeMe.style.position = 'absolute';
        changeMe.style.zindex = 99;
        changeMe.style.left   = model .offsetLeft + 'px';
        changeMe.style.top    = model .offsetTop + 'px';
        changeMe.style.width  = model .offsetWidth + 'px';
        changeMe.style.height = model .offsetHeight + 'px';
 
        return changeMe;
    },  // end sizeTo
 
 
 
/* ********  F U N C T I O N S   Y O U   M I G H T   O V E R R I D E  ******** */
 
 
    // These are examples of how you might override certain functions
    // if you want to add more complex behaviors.
    /*
 
...
 
your code
 
...
 
    // The default editor is a one-line 'input' element.
    // If you need anything more complex like a textarea
    // or a select box or something, return it here.
    //
    // Remember to code the following:
    //
    //    - Set the editor's starting value
    //    - Set the editor's size
    //
    InlineEditor.customEditor = function( theElement )
    {
        // Only interested in setting up something custom
        // for paragraph tags.
        if( theElement.tagName != 'P' )
            return;
 
        var editor = document.createElement( 'textarea' );
        editor.innerHTML    = theElement.innerHTML;
        editor.style.width  = "100%";
        editor.style.height = theElement.offsetHeight + "px";
 
        return editor;
    }   // end customEditor
 
...
 
    // If you use a custom editor, you may need to provide a
    // way to determine what the value is. The default behavior,
    // which will still take over if you return nothing, is
    // to check for the presence of the 'value' property.
    // If your editor has no 'value' property then the 'innerHTML'
    // property is used. If this suits your needs
    // even with your custom editor, then there's no need to
    // use this function.
    //
    InlineEditor.editorValue = function( editor )
    {
        // Hypothetical editor with some obscure way
        // of determing what the user selection is.
        if( editor.tagName == 'SomeObscureControl' )
            return editor.squareRootOfSelectedMenuItem;
 
    }   // end editorValue
 
...
 
    // If you have anything "funny" going on you're welcome
    // to define/override this function to determine just what
    // the starting value is. The default behavior, which will
    // be employed if you return nothing, is to use 'innerHTML'.
    InlineEditor.elementValue = function( theElement )
    {
        // Ignore the extra 'span' I threw in there. Just give me text.
        return theElement.innerText;
 
    }   // end elementValue
 
 
 
    // Unless you just want people to dink around with the
    // transient-by-nature current page, you'll probably want
    // to define/override this function and do something that
    // saves the user's changes. Here is an example using
    // "ajax" to immediately post a change. In this case,
    // I was using Google's Map APIs, so that's how I create
    // the HttpRequest.
    //
    InlineEditor.elementChanged = function( theElement, oldVal, newVal )
    {
        InlineEditor.addClass( theElement, 'uneditable' ); // Special InlineEditor class
        InlineEditor.addClass( theElement, 'saving' );     // My own class, maybe gray text
 
        var request = GXmlHttp.create(); // I was using Google's tools
        var url = "http://www.myserver.com/update.php?id=" + cell.id + "&val="+newVal;
 
        request.open("GET", url, true);
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
 
                InlineEditor.removeClass( theElement, 'uneditable' );
                InlineEditor.removeClass( theElement, 'saving' );
 
            }   // end if: readystate 4
        };  // end onreadystatechange
        request.send(null);
 
    };  // end elementChanged
 
 
 
 
    */
 
/* ********  F U N C T I O N S   Y O U   S H O U L D   N O T   C A L L  ******** */
 
 
    recursiveAddOnClickHandler: function( element )
    {
        element.onclick = InlineEditor.handleOnClick;
 
        if( element.childNodes ){
            children = element.childNodes;
            for( i = 0; i < children.length; i++ ){
                if( children[i].onclick ){
 
                    InlineEditor.recursiveAddOnClickHandler( children[i] );
 
                }   // end if: child also needs handler
            }   // end for: each child
        }   // end if: children
    },   // end recursiveAddOnClickHandler
 
 
/* General Functions  */
 
/*function BuildSelectListBox(tempSelect, currentOptionArray)
{
     for(var i=0; i<(currentOptionArray.length); i+=2)
     {
          tempSelect.options[tempSelect.options.length] = new Option(currentOptionArray[i], currentOptionArray[i+1]);
     }
     tempSelect.options.length = currentOptionArray.length / 2;
     return tempSelect;
}
*/
 
    /**
     * Called when element is double-clicked.
     * At the time of this event, the class is checked to see
     * if the cell is marked 'uneditable'.
     */
    handleOnClick: function( evt )
    {
        var evt = InlineEditor.fixEvent( evt );
        //var target = evt.target;
        var target = InlineEditor.findEditableTarget( evt.target );
 
        // If element is "uneditable" or "editing" don't edit.
        if( InlineEditor.checkClass( target, 'uneditable' ) || InlineEditor.checkClass( target, 'editing' ) )
            return;
 
        // Save original value.
        var oldHTML = target.innerHTML;
        var oldVal  = null;
        if( InlineEditor.elementValue )      // USER CAN PROVIDE OVERRIDE FUNCTION
            oldVal = InlineEditor.elementValue( target );
        if( !oldVal )
            oldVal = target.innerHTML;
 
        // Set up editor element
        // User overridable function
        var editor = null;
        if( InlineEditor.customEditor ){     // USER CAN PROVIDE OVERRIDE FUNCTION
            editor = InlineEditor.customEditor( target );
        }   // end if: customEditor
 
       if( !editor ) { // If user didn't provide custom editor
			//alert(target.className);alert(target.className);
				
			/*if(target.className.match("editable dropAction")) {
	            editor = document.createElement('select');	
				BuildSelectListBox(tempSelect, TypeArray);
				editor.appendChild(tempSelect);
				editor.Style.width='70px';
			}
*/
 
 
 
		if(target.className.match("editable drop1")) {
	            editor = document.createElement('select');
			
 
                orange1 = document.createElement('option');
                orange1.value="orange1"; orange1.innerHTML = "orange1";
                
				apple1 = document.createElement('option');
                apple1.value="apple1"; apple1.innerHTML = "apple1";
 
                orange1.selected = true;
                if(oldVal == "orange1") orange1.selected = true;
 
                editor.appendChild(apple1);
                editor.appendChild(orange1);
 
                editor.style.width = '70px';
            }
 
 
	
 
 			else if(target.className.match("editable drop2")) {
                editor = document.createElement('select');
 
				tomato1 = document.createElement('option');
                tomato1.value="tomato1"; tomato1.innerHTML = "tomato1";
                
				pine1 = document.createElement('option');
                pine1.value="pine1"; pine1.innerHTML = "pine1";
 
				stone1 = document.createElement('option');
                stone1.value="stone1"; stone1.innerHTML = "stone1";
 
			
 
                pine1.selected = true;
                if(oldVal == "tomato1") pine1.selected = true;
 
                editor.appendChild(tomato1);
                editor.appendChild(pine1);
				editor.appendChild(stone1);
 
                editor.style.width = '70px';
            }
 
 
            else if(target.className.match("list")) {
                editor = document.createElement('select');
                editor.setAttribute("multiple", "true");
                editor.setAttribute("size", "3");
 
                var valtarget = target.parentNode.childNodes[2];
		          if(!valtarget.innerHTML)
                   valtarget = target.parentNode.childNodes[3];
 
                var selvals = target.innerHTML.split(/\<br\>/);
                var vals = valtarget.innerHTML.split(/\s*,\s*/);
 
                for(var i=0; i<vals.length; i++) {
                  var opt = document.createElement('option');
                  opt.value=vals[i];
                  opt.innerHTML = vals[i];
 
                  for(var j=0; j<selvals.length; j++)
                     if(vals[i]==selvals[j])
                        opt.selected = true;
                  editor.appendChild(opt);
                }
                //editor.style.width = '70px';
                editor.style.width  = target.offsetWidth + 35 + 'px';
            }
            
            else {
                editor = document.createElement('input');
                editor.value = oldVal;
                editor.style.width  = target.offsetWidth + 5 + 'px';
                editor.style.height = target.offsetHeight + 5 + 'px';
            }   // end else: default
        }
 
        // Listen for when focus is lost.
        editor.onblur = function() { InlineEditor.handleInputBlur( editor, oldVal, oldHTML ); }
 
        // Prep target
        InlineEditor.addClass( target, 'editing' );
 
        // Add editor
        target.innerHTML = "";
        target.appendChild( editor );
        editor.focus();
 
        return false; // Don't propagate up. No need. Right?
    },   // end handleDoubleClick
 
 
    /**
     * Called when user is done editing the cell.
     */
    handleInputBlur: function( editor, oldVal, oldHTML )
    {
        // Gather values
        var parent = editor.parentNode;
        var newVal = null;
        if( InlineEditor.editorValue )
            newVal = InlineEditor.editorValue( editor );
        if( !newVal )
            newVal = editor.value ? editor.value : editor.innerHTML; // Fallback
 
        if(parent.className.match("list")) {
           newVal = "";
           var j=0;
           for(var i=0; i<editor.options.length; i++) {
              if(editor.options[i].selected) {
                 if(j>0) newVal += "<br>";
                 newVal += editor.options[i].value;
                 j++;
              }
           }
        }
 
        // If nothing changed, bail out
        if( oldVal == newVal ){
            parent.innerHTML = oldHTML
            InlineEditor.removeClass( parent, 'editing' );
            return;
        }   // end if: no change
 
        if(parent.className.match("multi")) {
            var valtarget = parent.parentNode.childNodes[2];
	         if(!valtarget.innerHTML)
               valtarget = parent.parentNode.childNodes[3];
            valtarget.innerHTML = newVal;
            var items = newVal.split(/\s+/);
            newVal = items[0]+"...";
        }
	     var rowNode = parent.parentNode.parentNode;
	     rowNode.style.backgroundColor="#33FF00";
 
        // Save value in the element
        parent.innerHTML = newVal;
        InlineEditor.removeClass( parent, 'editing' );
 
        // If user wants to know of the change, pass it on.
        if( InlineEditor.elementChanged )
            InlineEditor.elementChanged( parent, oldVal, newVal );
 
    },   // end handleInputBlur
 
 
    /**
     * http://www.onlinetools.org
     */
    jscss: function(a,o,c1,c2)
    {
        switch (a){
            case 'swap':
                o.className=!InlineEditor.jscss('check',o,c1) ?
                    o.className.replace(c2,c1) :
                    o.className.replace(c1,c2);
                break;
            case 'add':
                if(!InlineEditor.jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
                break;
            case 'remove':
                var rep=o.className.match(' '+c1)?' '+c1:c1;
                o.className=o.className.replace(rep,'');
                break;
            case 'check':
                return new RegExp('\\b'+c1+'\\b').test(o.className)
                break;
        }   // end switch: action
    },  // end jscss
 
 
    fixEvent: function( evt )
    {
        var E = evt ? evt : window.event; // 'event' seems to be a special word in IE, so I'm using 'E' instead.
        if( E.target )
            if( E.target.nodeType == 3 )
                E.target = E.target.parentNode;
 
        //make sure Opera doesn't set this object
        if( inlineeditor_isIE )
            if( E.srcElement )
                E.target = E.srcElement;
 
        return E;
    },   // end fixEvent
 
 
    findEditableTarget: function( target )
    {
        // If a table cell, we assume that's editable
        if( target.nodeType == 1 && target.tagName == 'TD' )
            return target;
 
        if( InlineEditor.checkClass( target, 'editable' ) )
            return target;
 
        if( target.parentNode )
            return InlineEditor.findEditableTarget( target.parentNode );
 
        return null;
    },  // end findEditableTarget
 
 
    addEvent: function( target, eventName, func, capture )
    {
        if( target.addEventListener ){
            target.addEventListener( eventName, func, capture );
            return true;
        }   // end if: addEventListener
        else if( target.attachEvent )
            return target.attachEvent( 'on'+eventName, func );
    },  // end addEvent
 
 
    removeEvent: function( target, eventName, func, capture )
    {
        if( target.removeEventListener ){
            target.removeEventListener( eventName, func, capture );
            return true;
        }   // end if: removeEventListener
        else if( target.detachEvent )
            return target.detachEvent( 'on'+eventName, func );
    }   // end removeEvent
 
}   // end class InlineEditor
 
/**
 * Add InlineEditor.init() to window.onload.
 */
InlineEditor.addEvent(window,'load',InlineEditor.init,false);

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20914255
I have looked but do not really understand what you want me to look at?
0
 

Author Comment

by:vidhubala
ID: 20915164
need to look at the text area edit that fails in ie, and need to change the way i did for dropdowns.
0
 

Author Comment

by:vidhubala
ID: 20942278
mp,

any updates?

thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20946218
Sorry. your comment did not explain clearly the issues
fails in IE how and "change the way i did for dropdowns" how?

I am sorry I have very little time to help you...

perhaps ypu can post a 20 point pointer question so other experts can take a look?
0
 

Author Comment

by:vidhubala
ID: 20961438
thanks
0
 

Author Closing Comment

by:vidhubala
ID: 31429977
thank u guys
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question