Làm cách nào để thêm dữ liệu vào bảng HTML một cách linh hoạt bằng HTML?

Tự động thêm/xóa hàng trong bảng HTML bằng JavaScript

bởi Viral Patel · 16 tháng 3, 2009

[ad name=”AD_INBETWEEN_POST”] Một thiết kế web tốt liên quan đến khả năng tương tác với người dùng tốt hơn và khả năng tìm nạp dữ liệu theo cách tốt hơn. Để tìm nạp dữ liệu người dùng, bạn có thể phải tạo một biểu mẫu trong đó người dùng có thể thêm nhiều mục nhập và gửi chúng đồng thời. Vì vậy, để làm được điều này, bạn sẽ cần một cách để thêm hoặc xóa các trường một cách linh hoạt vào trang HTML. Trong bài viết trước của tôi, tôi đã thảo luận về cách một người có thể thêm các thành phần biểu mẫu động vào trang web. Trong bài viết này, chúng tôi sẽ tạo giao diện người dùng nơi người dùng có thể thêm/xóa nhiều hàng trong một biểu mẫu bằng JavaScript. Đầu tiên kiểm tra giao diện người dùng.

Trong ví dụ này, chúng tôi đã tạo một bảng sẽ hiển thị các thành phần html của chúng tôi. Khi nhấn Thêm hàng, một hàng động sẽ được tạo và thêm vào bảng. Và khi chọn hộp kiểm và nhấn Xóa hàng, hàng sẽ bị xóa. Sau đây là nguồn.

Mã số

	 Add/Remove dynamic rows in HTML table 
	
		function addRow[tableID] {

			var table = document.getElementById[tableID];

			var rowCount = table.rows.length;
			var row = table.insertRow[rowCount];

			var cell1 = row.insertCell[0];
			var element1 = document.createElement["input"];
			element1.type = "checkbox";
			element1.name="chkbox[]";
			cell1.appendChild[element1];

			var cell2 = row.insertCell[1];
			cell2.innerHTML = rowCount + 1;

			var cell3 = row.insertCell[2];
			var element2 = document.createElement["input"];
			element2.type = "text";
			element2.name = "txtbox[]";
			cell3.appendChild[element2];


		}

		function deleteRow[tableID] {
			try {
			var table = document.getElementById[tableID];
			var rowCount = table.rows.length;

			for[var i=0; i

  

Code language: PHP [php]

Nếu bạn đã đọc đến đây, bạn nên theo dõi tôi trên twitter tại đây

Làm cách nào để thêm dữ liệu động vào bảng HTML?

Làm cách nào để tăng các hàng của bảng một cách linh hoạt HTML?

Chúng ta có thể tạo bảng động trong HTML không?

Làm cách nào để tự động chèn id vào phần tử bảng bằng JavaScript?