Question

我目前有一个以下列方式使用按钮的表格。

<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);
}

点击按钮，打开一个新页面，其中包含页面内容。我希望表格显示在按钮下方，而不必转到新页面来显示表格。我相信我需要替代document.write（myTable），但我不确定那个替代方案会是什么。我试图以任何方式避免jquery，我试图坚持我的jsp中的java，javascript和html。

Answer 1

创建一个具有唯一ID的div元素，沿着以下行：

<div id="tableHolder"></div>

然后将document.write替换为：

document.getElementById('tableHolder').innerHTML = myTable;

Answer 2

试试这个，

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

单击按钮显示表格

2 个答案: