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. Show Đô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.<td> 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. |
Trong mã trên, chúng tôi đã tạo một phần tử biểu mẫu với ba nút để thêm hàng, xóa hàng và gửi dữ liệu biểu mẫu. Trong phần tử biểu mẫu, chúng tôi đã tạo một bảng để hiển thị dữ liệu đầu vào biểu mẫu. Để thực hiện các hoạt động động trên bảng bằng JavaScript, chúng tôi đã đưa ID 'emptbl' vào bảng.form element with three buttons to Add Row, Delete Row and Submit form data. Within the form element, we have created a table to display the form input data. To perform dynamic operations on the table using JavaScript, we have given an id 'emptbl' to the table.
Các bước: JavaScript thêm các hàng vào bảng động
Đây là những giải thích mã từng bước về cách một hàng mới được tạo động khi người dùng nhấp vào nút 'Thêm hàng'.Add Row' button.
addRows () - Trong phần đầu, chúng tôi đã tạo một hàm javaScript có tên addrows () chịu trách nhiệm thêm một hàng bảng mới với các trường đầu vào. Đối với điều này, trước tiên chúng tôi có phần tử bảng với ID bảng và lưu trữ nó trong bảng biến JavaScript.- Within the head section, we have created a JavaScript function named addRows() that is responsible for adding a new table row with input fields. For this, first we got the table element with the table id and stored it in a JavaScript variable table.
var table = document.getElementById('emptbl');Tiếp theo, chúng tôi đã lưu trữ số lượng các phần tử bằng cách sử dụng các hàng thuộc tính JavaScript.length trong một rowcount biến và hàng [0] .cells.length Aporty Trả về số lượng phần tử trong hàng đầu tiên.<tr> elements using the Javascript property rows.length in a variable rowCount and rows[0].cells.length property returns the number of <td> elements in the first row.
var rowCount = table.rows.length;
var cellCount = table.rows[0].cells.length;Tiếp theo, chúng tôi đã tạo một hàng trống bằng cách sử dụng thuộc tính JavaScript Insertrow ().insertRow().
var row = table.insertRow(rowCount);Tiếp theo, chúng tôi đã tạo động các ô trong hàng trống bằng cách sử dụng vòng lặp cho vòng lặp và lấy bên trong của ô cũ với chỉ số ô và dán nó vào cái mới.
for(var i =0; i <= cellCount; i++){
}Steps: JavaScript deletes rows of the table dynamically
Đây là những giải thích mã từng bước về cách một hàng hiện tại bị xóa động khi người dùng nhấp vào nút 'Xóa hàng'.Delete Row' button.
DELETEROWS ()- Trong phần đầu sau hàm addRows (), chúng tôi đã tạo một tên hàm javaScript khác Deleterows () chịu trách nhiệm xóa các hàng bảng hiện có bằng các trường đầu vào. Đối với điều này, trước tiên chúng tôi có phần tử bảng với ID bảng và lưu trữ nó trong một bảng biến.- Within the head section after the addRows() function, we have created another JavaScript function name deleteRows() that is responsible for deleting existing table rows with input fields. For this, first we got the table element with the table id and stored it in a variable table.
Tiếp theo, chúng tôi đã lưu trữ số lượng các phần tử bằng cách sử dụng các hàng thuộc tính.length trong một rowcount biến.<tr> elements using the property rows.length in a variable rowCount.
var rowCount = table.rows.length;Tiếp theo, sử dụng câu lệnh IF khác, chúng tôi đã kiểm tra xem số lượng hàng bảng lớn hơn một hoặc không.IF Else statement, we have checked whether the number of table rows is greater than one or not.
if(rowCount > '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.
