個人感覺比較簡單的jQuery實現九九乘法表,歡迎私信各種簡單代碼。需要引入jQuery庫
HTML部分,樣式可自己設計, 主要看JS部分,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="乘法表.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
width: 690px;
height: 500px;
line-height: 35px;
text-align: center;
margin: 10px auto;
}
table {
border-collapse: collapse;
}
tr {
height: 35px;
}
td {
width: 70px;
border: solid black;
}
</style>
</head>
<body>
<div>
<h1 style="text-align: center;">九九乘法表</h1>
<hr />
</div>
</body>
</html>
JS部分
$(function(){
var $table = $("<table></table>");
$("hr").after($table);
for (var i=1; i<10; i++ ) {
var $tr = $("<tr></tr>");
$table.append($tr);
for (var j=1; j<=i; j++) {
var $td = $("<td></td>");
$("tr:eq("+(i-1)+")").append($td);
//填入公式
var sun = j + " x " + i + "=" + i * j;
$("tr:eq("+(i-1)+") td:eq("+(j-1)+")").text(sun);
}
}
})