Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 958
  • Last Modified:

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...   =)
0
expert_mentos
Asked:
expert_mentos
  • 5
  • 5
1 Solution
 
expert_mentosAuthor Commented:
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">
            &nbsp;10010
            <input type="hidden" name="hdnOrdersItemCode" value="10010">
        </td>
    </tr>
</tbody>
</table>

<INPUT type="button" class="crm_Buttons" name="btnEditCell" value="Edit" onClick="EditCell()">
0
 
sajuksCommented:
//INNERHTML

<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">
            &nbsp;10010
            <input type="hidden" name="hdnOrdersItemCode" value="10010">
        </td>
    </tr>
</tbody>
</table>

<INPUT type="button" class="crm_Buttons" name="btnEditCell" value="Edit" onClick="document.getElementById('abc').innerHTML='NewValue';"">
0
 
sajuksCommented:
//innertext is IE only
<script>

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


0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

Thanks again...   =)

0
 
expert_mentosAuthor Commented:
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...!    =)
0
 
sajuksCommented:
"
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.

0
 
expert_mentosAuthor Commented:

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">
            &nbsp;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">
            &nbsp;10010
            <input type="hidden" name="hdnOrdersItemCode" value="10010">
        </td>
    </tr>
</tbody>
</table>
0
 
sajuksCommented:
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">
            &nbsp;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')">
0
 
expert_mentosAuthor Commented:

It worked already...    Thanks...!
0
 
sajuksCommented:
Thanks for the points and grade
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now