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

id="col0"> type="text" name="empname[]" value="" /> id="col1"> type="text" name="phone[]" value="" /> id="col2"> name="department[]" id="dept"> value="0">Select Department Sales IT Warehouse id="col3"> type="radio" name="gender[0]" value="male" />Male type="radio" name="gender[1]" value="female" />Female

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.<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.

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

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.



</span>Onclick increase Table Rows<span>
 type="text/javascript">
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 <= cellCount; i++){
		var cell = 'cell'+i;
		cell = row.insertCell(i);
		var copycel = document.getElementById('col'+i).innerHTML;
		cell.innerHTML=copycel;
		if(i == 3){ 
			var radioinput = document.getElementById('col3').getElementsByTagName('input'); 
			for(var j = 0; j <= radioinput.length; j++) { 
				if(radioinput[j].type == 'radio') { 
					var rownum = rowCount;
					radioinput[j].name = 'gender['+rownum+']';
				}
			}
		}
	}
}
function deleteRows(){
	var table = document.getElementById('emptbl');
	var rowCount = table.rows.length;
	if(rowCount > '2'){
		var row = table.deleteRow(rowCount-1);
		rowCount--;
	}
	else{
		alert('There should be atleast one row');
	}
}



 action="#" method="post">    
	 id="emptbl">
		
Employee Name Phone Department Gender
type="button" value="Add Row" onclick="addRows()" /> type="button" value="Delete Row" onclick="deleteRows()" /> type="submit" value="Submit" />

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++){

}
Các bước: JavaScript xóa các hàng của bảng một cách linh hoạt

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.

Ả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

Làm thế nào để bạn xóa một hàng trong một bảng bằng JavaScript?

Phương thức deleterow () sẽ loại bỏ hàng tại chỉ mục được chỉ định khỏi bảng. Mẹo: Sử dụng Insertrow () để tạo và chèn một hàng mới. removes the row at the specified index from a table. Tip: Use the insertRow() to create and insert a new row.

Làm thế nào để bạn chỉnh sửa một hàng trong một bảng bằng JavaScript?

Sau khi tạo một bảng trong JavaScript, bạn có thể chèn và kết hợp các hàng và cột hoặc định dạng bảng bằng cách điều chỉnh độ rộng của ô, màu sắc và căn chỉnh của bảng.Bạn có thể sử dụng thuộc tính có liên quan đến các ô, hàng hoặc bảng để chỉnh sửa bảng.use the contenteditable attribute on the cells, rows, or table to edit a table.

Làm thế nào thêm và xóa hàng khỏi bảng trong jQuery?

Thêm một hàng: Sau đó, chúng tôi sẽ sử dụng sự kiện JQuery, nhấp chuột để phát hiện một cú nhấp chuột vào nút Thêm hàng và sau đó sử dụng.Phương thức nối () của jQuery để thêm một hàng trong bảng.Mỗi phần tử hàng đã được gán một id ri mà sau này chúng ta sẽ sử dụng để xóa một hàng.Mỗi phần tử có một cột chỉ mục hàng và xóa cột nút.use the jQuery “click” event to detect a click on the add row button and then use the . append() method of jQuery to add a row in the table. Each row element has been assigned an id Ri that we will later use to delete a row. Each element has a row index column and remove the button column.

Làm cách nào để tự động thêm hàng trong HTML?

Phương thức Insertrow () tạo một phần tử trống và thêm nó vào một bảng.Phương thức Insertrow () chèn (các) hàng mới tại chỉ mục được chỉ định trong bảng.Lưu ý: Một phần tử phải chứa một hoặc nhiều hoặc các phần tử.Mẹo: Sử dụng phương thức deleterow () để loại bỏ một hàng.. The insertRow() method inserts the new row(s) at the specified index in the table. Note: A element must contain one or more or elements. Tip: Use the deleteRow() method to remove a row.