这是由上一篇文章里面的拓展：
九九乘法表普通代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
td {
padding: 5px
}
table {
border-collapse: collapse;
}
td:hover {
background-color: yellow;
}
</style>
</head>
<body>
<script type="text/javascript">
var num = window.prompt("请输入乘法表行数");
document.write("<table border='1' align='center' >");
for (var i = 1; i <= num; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write("j" + "*" + "i" + "=" + i * j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
运用onclick导致css失效代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style type="text/css">
td {
padding: 5px;
}
td:hover {
background-color: yellow;
}
table {
border-collapse: collapse;
} </style>
</head>
<body>
<input name="maxnum" id="max" type="text">
<input name="button" id="btn" type="button" value="输出" onclick="isRealNum()">
<script type="text/javascript"> function isRealNum() {
var val = document.getElementById('max').value;
if (val === "" || val == null) {
window.alert("输入参数不能为空,请输入一个合法的数字");
}
if (!isNaN(val)) {
printJiu();
} else {
window.alert("输入参数有误,请输入一个合法的数字");
}
}
function printJiu() {
var num = document.getElementById('max').value;
document.write("<table border='1px'>");
for (i = 1; i <= num; i++) {
document.write("<tr>");
for (j = 1; j <= i; j++) {
document.write("<td>");
document.write(i + "*" + j + "=" + i * j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
} </script>
</body>
</html>
解决方案：将表格用字符串拼接起来，然后再使用innerHTML,避免了使用document.write导致刷新
改进代码代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style type="text/css">
td {
padding: 5px;
}
td:hover {
background-color: yellow;
}
table {
border-collapse: collapse;
} </style>
</head>
<body>
<input name="maxnum" id="max" type="text">
<input name="button" id="btn" type="button" value="输出" onclick="isRealNum()">
<script type="text/javascript"> function isRealNum() {
var val = document.getElementById('max').value;
if (val === "" || val == null) {
window.alert("输入参数不能为空,请输入一个合法的数字");
}
if (!isNaN(val)) {
printJiu();
} else {
window.alert("输入参数有误,请输入一个合法的数字");
}
}
function printJiu() {
var num = document.getElementById('max').value;
var str = "";
str += "<table border='1px'>";
for (i = 1; i <= num; i++) {
str += "<tr>";
for (j = 1; j <= i; j++) {
str += "<td>";
str += i + "*" + j + "=" + i * j;
str += "</td>";
}
str += "</tr>";
}
str += "</table>";
document.getElementsByTagName("body")[0].innerHTML = str;
} </script>
</body>
</html>