create text to textbox using java script

**prashant_ora** · 09-14-2011, 01:43 PM

Hi,

We have to enable the complete rows of a html generated table into a text box. Say I click on any of the cell of a particular row, then all the cell of that particular rows shoule be converted into text box using java script.

Thanks
Prashant

**vwphillips** · 09-14-2011, 03:59 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function INPUT(id){
 var obj=document.getElementById(id),tds=obj.getElementsByTagName('TD'),z0=0,ip,html;
 for (;z0<tds.length;z0++){
  tds[z0].onmouseup=function(){ AddInput(this); }
 }
}

function AddInput(td){
 var ip=zxcAddField('INPUT','text','');
 ip.value=td.innerHTML;
 td.innerHTML='';
 td.appendChild(ip);
 td.onmouseup=null;
}

function zxcAddField(nn,type,nme){
 var obj;
 try {
  obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
 }
 catch(error){
  obj=document.createElement(nn);
  if (type){
   obj.type=type;
  }
  obj.name=nme||'';
 }
 return obj;
}


/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 INPUT('tst');
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>
</head>

<body>
<table id="tst" border="1">
  <tr width="200">
    <td>some html</td>
  </tr>
</table>
</body>

</html>

**prashant_ora** · 09-15-2011, 07:53 AM

Thanks for your reply.

As per your code, we can do it for a row.... but in our case we have a set of rows and user can click any of cell of any rows, so how can we do that for that particular row.... how to identify that row and for that row how can i convert into textbox.

**vwphillips** · 09-15-2011, 12:11 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function INPUT(id){
 var obj=document.getElementById(id),tds=obj.getElementsByTagName('TD'),z0=0,ip,html;
 for (;z0<tds.length;z0++){
  tds[z0].onmouseup=function(){ AddInput(this); }
 }
}

function AddInput(td){
 var ip=zxcAddField('INPUT','text','');
 ip.value=td.innerHTML;
 td.innerHTML='';
 td.appendChild(ip);
 td.onmouseup=null;
}

function zxcAddField(nn,type,nme){
 var obj;
 try {
  obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
 }
 catch(error){
  obj=document.createElement(nn);
  if (type){
   obj.type=type;
  }
  obj.name=nme||'';
 }
 return obj;
}


/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 INPUT('tst');
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>
</head>

<body>
<table border="1">
  <tr id="tst" width="200">
    <td>some html</td>
  </tr>
  <tr width="200">
    <td>some html</td>
  </tr>
</table>
</body>

</html>

**prashant_ora** · 09-15-2011, 02:41 PM

I executed the same code through browser, it create 2 rows and one column with name "some html" when i clicked in the first row and first column, it converted both the row and columns into text box. Why it is converting both the row's column, it should convert only one rows columns in which i clicked.

When i refresh the page again and click in second row's column, nothing happen, why so.It should also convert into text box.

One more thing i want to know, is it possible to convert the rows into text box if we move through tab.

Thread: create text to textbox using java script

Thread Tools

Search Thread

create text to textbox using java script

Bookmarks

Bookmarks

Posting Permissions