javascript 触发完点击事件改变表格宽度，但瞬间又恢复原状
本文介绍了javascript 触发完点击事件改变表格宽度，但瞬间又恢复原状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title>图形的周长和面积计算器</title>
<meta charset="utf-8">
<style type="text/css">
table{
margin-top: 30px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var circle = document.getElementById('circle');
circle.onclick = function(){
for (var i = 2; i >= 0; i--) {
var tuxing = document.getElementsByTagName('table')[i];
//tuxing.style.display = "none";
tuxing.width = "1000";
}
// var table = document.getElementsByTagName('table');
}
}
</script>
</head>
<body>
<center>
<h2>图形的周长和面积计算器</h2>
<hr>
<form action="" method="post">
<input type="submit" value="矩形" id="circle"></input>  ||
<input type="submit" value="三角形"></input>  ||
<input type="submit" value="圆形"></input>
<table align="center" border="1">
<tr>
<td>圆形的半径</td>
<td>运算</td>
<td>圆形的周长</td>
<td>圆形的面积</td>
</tr>
<tr>
<td>
<input type="text" name="circleRadius"></input>
</td>
<td>
<input type="submit" value="运算"></input>
</td>
<td>
<input type="text" name="circlePerimeter" value=""></input>
</td>
<td>
<input type="text" name="circleArea"></input>
</td>
</tr>
<input type="hidden" name="action" value="circle"></input>
</table>
<table align="center" border="1" >
<tr>
<td>三角形的第一条边</td>
<td>三角形的第二条边</td>
<td>三角形的第三条边</td>
<td>运算</td>
<td>三角形的周长</td>
<td>三角形的面积</td>
</tr>
<tr>
<td>
<input type="text" name="triangleOne"></input>
</td>
<td>
<input type="text" name="triangleTwo"></input>
</td>
<td>
<input type="text" name="triangleThree"></input>
</td>
<td>
<input type="submit" value="运算"></input>
</td>
<td>
<input type="text" name="trianglePerimeter"></input>
</td>
<td>
<input type="text" name="triangleArea"></input>
</td>
</tr>
<input type="hidden" name="action" value="triang"></input>
</table>
<table align="center" border="1" >
<tr>
<td>矩形的宽度</td>
<td>矩形的高度</td>
<td>运算</td>
<td>矩形的周长</td>
<td>矩形的面积</td>
</tr>
<tr>
<td>
<input type="text" name="longWidth"></input>
</td>
<td>
<input type="text" name="longHigth"></input>
</td>
<td>
<input type="submit" value="运算"></input>
</td>
<td>
<input type="text" name="longPerimeter"></input>
</td>
<td>
<input type="text" name="longArea"></input>
</td>
</tr>
<input type="hidden" name="action" value="long"></input>
</table>
</form>
</center>
</body>
</html>
请输入代码触发完单击事件，有一瞬间改变了表格的宽度，很快就恢复了。请问这是为什么？怎么解决那？
解决方案
因为你的矩形按钮设置的type属性为submit,所以每次点击后会提交页面（页面会刷新），将type属性改为button就可以了！希望对你有帮助！
这篇关于javascript 触发完点击事件改变表格宽度，但瞬间又恢复原状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
