Displaying a table on click of a button

Question

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.

Bojan Bjelic · Accepted Answer · 2014-08-11 20:35:14Z

1

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;

answered Aug 11, 2014 at 20:35

Bojan Bjelic

3,5521 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolas · Accepted Answer · 2014-08-11 20:37:55Z

0

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>

answered Aug 11, 2014 at 20:37

Nicolas

1,1531 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Displaying a table on click of a button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related