asked on

Edit a Cell's innerText and innerHTML

Hi Experts,

I am trying to change a particular cell's innerText and innerHTML in my table... May I ask how to do this...?

A sample code would be best...

Thanks in advanced experts... =)

expert_mentos

ASKER

Here is my code...

<table id="tblOrders" cellspacing="0" cellpadding="0" border="1" bgcolor="#ffffff" align="left" width="700">
<tbody id="tbodyOrders">
<tr>
<td bgcolor="#ffffff" valign="center" align="center" width="17" height="24" class="crmlistView">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td bgcolor="#ffffff" valign="bottom" width="55" height="24" align="left" class="crmlistView">
 10010
<input type="hidden" name="hdnOrdersItemCode" value="10010">
</td>
</tr>
</tbody>
</table>

<INPUT type="button" class="crm_Buttons" name="btnEditCell" value="Edit" onClick="EditCell()">

ASKER CERTIFIED SOLUTION

sajuks

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sajuks

//innertext is IE only
<script>

function init()
{
document.getElementById("somewhat").innerText ="hello";
}
</script>
<body onload="init()">
<div id="somewhat">text</div>
</body>

expert_mentos

ASKER

Will document.getElementById('abc').innerHTML='NewValue' totally deletes all the HTML inside the cell and replace with 'New Value'...?

Thanks again... =)

expert_mentos

ASKER

What if in my next row, I do have another td with id 'abc'... Will it be getElementById('abc[0]') and getElementById('abc[1]')....?

Thanks again...! =)

sajuks

"
Will document.getElementById('abc').innerHTML='NewValue' totally deletes all the HTML inside the cell and replace with 'New Value'...?"
>>Yes.

"Will it be getElementById('abc[0]') and getElementById('abc[1]')"
Nope. What i've provided is an example fot you how to do it.

expert_mentos

ASKER

Actually my table can have plenty of rows having the same number of columns, with each column has its unique id per row...

With this, may I ask how will I indicate that only 1 row (e.g. 2nd row) will change its column (document.getElementById('abc').innerHTML='NewValue')...?

Thanks again...! =)

<table id="tblOrders" cellspacing="0" cellpadding="0" border="1" bgcolor="#ffffff" align="left" width="700">
<tbody id="tbodyOrders">
<tr>
<td bgcolor="#ffffff" valign="center" align="center" width="17" height="24" class="crmlistView">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td id = "abc" bgcolor="#ffffff" valign="bottom" width="55" height="24" align="left" class="crmlistView">
 10010
<input type="hidden" name="hdnOrdersItemCode" value="10010">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="center" align="center" width="17" height="24" class="crmlistView">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td id = "abc" bgcolor="#ffffff" valign="bottom" width="55" height="24" align="left" class="crmlistView">
 10010
<input type="hidden" name="hdnOrdersItemCode" value="10010">
</td>
</tr>
</tbody>
</table>

sajuks

The td id will be unique for each row , rite.
So you just need to pass the id to a function
something like

<script>

function init(sid)
{

document.getElementById(sid).innerHTML ="hello";
}
</script>

<table id="tblOrders" cellspacing="0" cellpadding="0" border="1" bgcolor="#ffffff" align="left" width="700">
<tbody id="tbodyOrders">
<tr>
<td bgcolor="#ffffff" valign="center" align="center" width="17" height="24" class="crmlistView">
<input type="checkbox" name="checkbox" value="checkbox">
</td>
<td id = "abc" bgcolor="#ffffff" valign="bottom" width="55" height="24" align="left" class="crmlistView">
 10010
<input type="hidden" name="hdnOrdersItemCode" value="10010">
</td>
<td>
</tr>
</tbody>
</table>

<INPUT type="button" class="crm_Buttons" name="btnEditCell" value="Edit" onClick="init('abc')">

expert_mentos

ASKER

It worked already... Thanks...!

sajuks

Thanks for the points and grade