<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>無標題文件</title>
	<style>
		.mytable{
			border:2px solid black;
			border-collapse: collapse;
			background: #AFFCDC;
			margin-bottom: 20px;
		}
		.mytable td{
			border:1px solid black;
			width:60px;
			padding:5px;
			text-align: center;
		}
		.mytable tr:nth-child(odd){
			background-color: rgba(179, 86, 88, 0.55);
		}



	</style>

<script>

	function tPrint(arr, r, c)
	{
		var myTable = document.createElement("table");
		var tbody = document.createElement("tbody");
		myTable.appendChild(tbody);
		document.body.appendChild(myTable);

		myTable.classList.add("mytable");
		var thtml = "";

		for(var i=0; i<r; i++)
		{
			thtml += "<tr>";
			for(var j=0; j<c; j++)
			{
				thtml+="<td>"+arr[i][j]+"</td>"
				console.log(arr[1][0]);
			}
			thtml +="</tr>"

		}
		tbody.innerHTML=thtml;
	}

	function init(arr, r, c)
	{

		for(var i=0; i<r; i++)
		{
			arr[i]=[];
			for(var j=0; j<c; j++)
			{
				arr[i][j]=i*r+j+1;
			}
		}
	}

	function transform(arr, r, c)
	{
		var myTable = document.createElement("table");
		var tbody = document.createElement("tbody");
		myTable.appendChild(tbody);
		document.body.appendChild(myTable);

		myTable.classList.add("mytable");
		var thtml = "";

		for(var i=0; i<r; i++)
		{
			thtml += "<tr>";
			for(var j=0; j<c; j++)
			{
				thtml+="<td>"+arr[j][i]+"</td>"
				console.log(arr[1][0]);
			}
			thtml +="</tr>"

		}
		tbody.innerHTML=thtml;
	}

</script></head>



<body>
<script>
	var m=[];
	init(m, 5, 5);
	tPrint(m, 5, 5, "mytbody");
	transform(m, 5, 5);
	//tPrint(m, 5, 5, "mytbody");



	/*var n=[];
	init(n, 6, 6);
	tPrint(n, 6, 6, "mytbody1");*/

</script>


</body></html>