Forum Moderators: open
I have a table with 1 row 2 columns. In row 1 column 1, I have an image. By default, row 1 column 2 is blank. So, what I want to do is, when i move my mouse to the image at row 1 column 1, then will have a table to be shown in row 1 column two. I tried to do this with getElementId function, but it does not work. Any idea? any example or tutorial for doing this?
Thanks.
Below code can help you.
<html>
<body>
<p>Click on the table header to sort in ascending order.</p>
<table border="1" id="tblSort">
<thead>
<tr>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td onmouseout="loaddummy()" onmouseover="loadtable()"><img src="1.jpg"></td><td></td>
</tr>
<tr>
<td>Johnson</td><td>Pradeep</td>
</tr>
<tr>
<td>Henderson</td><td>Praveen</td>
</tr>
<tr>
<td>Williams</td><td>Syamala</td>
</tr>
<tr>
<td>Gilliam</td><td>Rama Krishna</td>
</tr>
<tr>
<td>Walker</td><td>Polepeddi Rama Lakshmi</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
function loaddummy() {
}
function loadtable() {
var oTBody = document.getElementById("tblSort").getElementsByTagName("tbody")[0];
var colDataRows = oTBody.rows;
//alert(colDataRows[0].cells[1]);
colDataRows[0].removeChild(colDataRows[0].cells[1]);
var cell41 = document.createElement("td");
cell41.setAttribute("innerHTML","<table border=1><tr><td>Governorpet</td><td>Vijayawada</td></tr><tr><td>Governorpet</td><td>Vijayawada</td></tr><tr><td>Governorpet</td><td>Vijayawada</td></tr></table>");
colDataRows[0].appendChild(cell41);
}
</script>
Thanks
Prasanth J.V.R.S
