Hàm để tạo bảng HTML bằng JavaScript

Bây giờ hãy tạo hàm createTable, hàm này sẽ tạo một bảng với kích thước xác định và thêm nó vào cuối phần tử được chỉ định.

Hãy để tham số đầu tiên của hàm chúng ta nhận số lượng hàng, tham số thứ hai - số lượng cột, và tham số thứ ba - tham chiếu đến phần tử DOM, bên trong phần tử đó bảng của chúng ta sẽ được tạo.

Hãy xem chúng ta sẽ sử dụng hàm đã mô tả như thế nào khi nó được tạo. Ví dụ, giả sử chúng ta có một div như thế này:

<div id="elem"></div>

Hãy tạo một bảng bên trong div này 3 trên 4:

let div = document.querySelector('#elem');
createTable(3, 4, div);

Bây giờ giả sử chúng ta có hai div:

<div id="elem1"></div>
<div id="elem2"></div>

Hãy tạo bảng riêng trong mỗi div này:

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

Để các bảng được tạo có thể nhìn thấy ngay lập tức, có thể thêm một chút CSS, ví dụ như sau:

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

Đây là khung của hàm đã mô tả:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// tại đây tạo bảng với rows hàng và cols cột
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Hãy hoàn thành code cho khung hàm được trình bày ở trên. Kiểm thử hoạt động của hàm đã hoàn thành.