Hướng dẫn add and delete row in table using javascript - thêm và xóa hàng trong bảng bằng javascript

Trong bài viết này, bạn sẽ tìm hiểu cách tạo giao diện người dùng đơn giản trong đó người dùng có thể thêm hoặc xóa nhiều hàng bảng trong một biểu mẫu động bằng cách sử dụng JavaScript.JavaScript.

Đôi khi, có thể có một yêu cầu cho người dùng gán dữ liệu cho bảng một cách động bằng cách sử dụng JavaScript cho nhiều hàng. Chúng tôi không thể giả định có bao nhiêu trường chúng tôi nên cung cấp trên trang web. Giống như, chúng tôi cần cung cấp một số chi tiết nhân viên. Không có sự chắc chắn về số lượng chi tiết nhân viên. Có lẽ sau này chúng ta phải xóa một số. Hãy thảo luận về cách các cột, hàng và ô sẽ được tạo hoặc loại bỏ động trong bảng HTML bằng JavaScript. of a table dynamically using JavaScript for multiple rows. We cannot assume how many fields we should provide on the webpage. Like, we need to provide some employee details. There is no surety of how many employee details there are. Maybe later we have to delete some. Let's discuss how columns, rows, and cells will be dynamically created or removed in the HTML table using JavaScript.

Trong bài đăng này, chúng tôi sẽ cung cấp hai nút, đầu tiên để thêm các hàng mới vào bảng và thứ hai để xóa các hàng. Mã sẽ thêm hoặc xóa toàn bộ hàng với các trường đầu vào của chúng một cách linh hoạt.

Như chúng ta đã biết, JavaScript là một ngôn ngữ năng động. Nó có nghĩa là nó có thể kiểm soát, truy cập và thao tác các phần tử HTML một cách động ở phía máy khách. Sử dụng JavaScript, chúng ta có thể dễ dàng thêm và xóa các phần tử HTML khỏi trang web. Trong bài viết này, chúng tôi sẽ cung cấp cho bạn một cách đơn giản để thêm hoặc xóa các hàng bảng HTML bằng các trường của chúng một cách linh hoạt.JavaScript is a dynamic language. It means it can control, access, and manipulate the HTML elements dynamically on the client side. Using JavaScript, we can easily add and remove HTML elements from a web page. In this article, we will provide you with a simple way to add or remove HTML table rows with their fields dynamically.

Mã dưới đây có dạng HTML và hai hàm javascript. & Nbsp; để thêm và xóa các hàng bảng, sử dụng addrows [] và deleterows [], tương ứng.addRows[] and deleteRows[], respectively.



Onclick increase Table Rows

function addRows[]{ 
	var table = document.getElementById['emptbl'];
	var rowCount = table.rows.length;
	var cellCount = table.rows[0].cells.length; 
	var row = table.insertRow[rowCount];
	for[var i =0; i  '2']{

}

Nếu đó là sự thật, thì nó sẽ xóa một hàng với thuộc tính JavaScript Deleterow [] và giảm số lượng hàng.TRUE, then it deletes one row with the JavaScript property deleteRow[] and decrements the number of rows by one.

var row = table.deleteRow[rowCount-1];
rowCount--;

Chúng tôi hy vọng mã này giúp ai đó. Bạn có thể thực hiện điều này một cách dễ dàng với các chỉnh sửa nhỏ. Trong quá trình thực hiện, vui lòng chăm sóc ID bảng và ID cột.table id and columns id.

Ảnh chụp màn hình của các hàng bảng bổ sung/xóa

Những bài viết liên quan

Chủ Đề