Reputation: 327
I currently have a table which works with a button in the following fashion.
<input type="button" id="button" value="Click to show states" onclick="showState()"/>
function showState()
{
var myTable= "<table><tr><td style='width: 250px; color: red;'>Type</td>";
myTable+= "<td style='width: 250px; color: red; text-align: left;'>Value</td></tr>";
myTable+="</table>";
document.write( myTable);
}
Onclick of the button a new page opens with the page's contents. I want the table to appear just below the button and not have to go to a new page to display the table. I belive I need an alternative to document.write(myTable) but I am not sure what that alternative would be. I am trying to avoid jquery in any way and I am trying to stick to java, javascript and html in my jsp.
Upvotes: 0
Views: 134
Reputation: 1143
Try this,
<input type="button" id="button" value="Click to show states" onclick="showState()"/>
<div id="table"></div>
<script>
function showState()
{
var myTable= "<table><tr><td style='width: 250px; color: red;'>Type</td>";
myTable+= "<td style='width: 250px; color: red; text-align: left;'>Value</td></tr>";
myTable+="</table>";
var div = document.getElementById("table");
div.innerHTML = div.innerHTML + myTable;
}
</script>
Upvotes: 0
Reputation: 3542
Create a div element with an unique id, along the lines of:
<div id="tableHolder"></div>
Then replace your document.write with:
document.getElementById('tableHolder').innerHTML = myTable;
Upvotes: 1