簡單的打印九九乘法表

個人感覺比較簡單的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);
		}
	}
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章