I have DIV and inside div it has table. I want to change the one of the column value of table using java script. I can do it by getting the element id of column, but there is no any id assigned to any table's column. Below is the example.
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle>Talk to me </TD></TR></TBODY></TABLE>
</div>
Is it possible to change the "Talk to me" text using javascript?
Yes, you need to get the element and then set a new value to element.innerHTML
. It's easiest if you give an id
to the element that you want to change but you don't need to
<script type="text/javascript">
var usersec = document.getElementById('usersec');
var td = usersec.getElementsByTagName('td')[0];
td.innerHTML = 'New value';
</script>
If your userbase is IE8+, you can safely use querySelector
:
var container = document.getElementById('usersec');
var td = container.querySelector('tr:first-child > td');
if(td){
td.innerHTML = "New Text!";
}
Here's a JSFIDDLE: http://jsfiddle.net/rgthree/YkhwE/
querySelector
(or querySelectorAll
) allow you to target elements in the DOM via CSS syntax, which is very useful. It's very well supported, in every current and previous browser. (via Can I Use )
You can assign an id to the TD, and use that;
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle id="cellToChange">Talk to me</TD>
</TR></TBODY></TABLE>
</div>
<script type="text/javascript">
document.getElementById("cellToChange").innerText = "Go on, talk to me please!";
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.