Solved

Edit a Cell's innerText and innerHTML

Posted on 2004-09-28
10
909 Views
Last Modified: 2006-11-17
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
Comment
Question by:expert_mentos
  • 5
  • 5
10 Comments
 

Author Comment

by:expert_mentos
Comment Utility
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
 
LVL 33

Accepted Solution

by:
sajuks earned 50 total points
Comment Utility
//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
 
LVL 33

Expert Comment

by:sajuks
Comment Utility
//innertext is IE only
<script>

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


0
 

Author Comment

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

Thanks again...   =)

0
 

Author Comment

by:expert_mentos
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 33

Expert Comment

by:sajuks
Comment Utility
"
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
 

Author Comment

by:expert_mentos
Comment Utility

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
 
LVL 33

Expert Comment

by:sajuks
Comment Utility
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
 

Author Comment

by:expert_mentos
Comment Utility

It worked already...    Thanks...!
0
 
LVL 33

Expert Comment

by:sajuks
Comment Utility
Thanks for the points and grade
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now