Javascript xóa hàng của bảng onclick

Trong bài viết này, bạn sẽ thấy cách thêm/xóa các hàng trong bảng một cách linh hoạt bằng cách sử dụng JavaScript. Bạn cũng sẽ thấy cách bạn có thể làm điều tương tự trong bảng Bootstrap

Mục lục

Tổng quan

Đôi khi chúng tôi được yêu cầu thêm hoặc xóa các bản ghi (các hàng của bảng) khỏi bảng HTML khi chạy. Chúng tôi có thể thêm bao nhiêu bản ghi mà chúng tôi muốn thêm và xóa bất kỳ bản ghi nào chúng tôi muốn xóa khỏi bảng HTML. Chúng tôi cũng sẽ thực hiện chức năng tương tự ở đây với bảng Bootstrap để làm cho nó phản hồi nhanh

Làm cách nào để bạn thêm và xóa các hàng của bảng HTML trong JavaScript?

Ở đây chúng ta đã định nghĩa một phương thức addNewRow() để thêm một hàng mới (một bản ghi) và một phương thức deleteRow() để xóa hàng hiện có khỏi bảng. Hãy hiểu từng bước một

JavaScript tự động thêm các hàng vào bảng

1. ) Tạo một bảng HTML trống có tiêu đề bảng. ví dụ. –

	

		
First Name
		
Last Name
		
Mobile No
		
Email ID
		
Action
	

2. ) Để thêm một hàng động, hãy tạo một phương thức JavaScript có tên addNewRow() và gọi nó bằng một lần bấm nút

3. ) Bên trong addNewRow(), tìm rowCount và chèn hàng mới vào cuối bảng. ví dụ. -

var table = document.getElementById("employee-table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

4. ) Bây giờ hãy tìm cellCount và lặp lại nhiều lần để tạo một ô và chèn nó vào một hàng đã tạo. ví dụ. -

var cellCount = table.rows[0].cells.length; 
for(var i =0; i < cellCount; i++){
	var cell = row.insertCell(i);
	if(i < cellCount-1){
		cell.innerHTML='';
	}else{
		cell.innerHTML = '';
	}
}

bước. Javascript tự động xóa các hàng khỏi bảng

1. ) Để xóa hàng của bảng, hãy xác định một phương thức JavaScript có tên là deleteRow() và gọi nó bằng một lần bấm nút

2. ) Bên trong deleteRow(), tìm rowCount, và nếu số lượng nhiều hơn 1 thì tiến hành xóa. ví dụ. -

var table = document.getElementById('employee-table');
var rowCount = table.rows.length;
if(rowCount <= 1){
	alert("There is no row available to delete!");
	return;
}

//go for the deletion here...

3. ) Bây giờ dựa vào nơi gọi hàm deleteRow(), chúng ta muốn xóa hàng cụ thể hay hàng cuối cùng đều cần viết code như sau. -

//ele is an argument to this method

if(ele){
	//delete specific row
	ele.parentNode.parentNode.remove();
}else{
	//delete last row
	table.deleteRow(rowCount-1);
}

Hoàn thành ví dụ để thêm và xóa các hàng trong bảng một cách linh hoạt

	
		 
		
	
	
		

			
Dynamically Add and Delete Table Rows using Javascript
 
			Add New Row
			Delete Row
			


			

				
First Name
Last Name
Mobile No
Email ID
Action
			
		
		
	
	

	

ĐẦU RA

Làm cách nào để bạn thêm và xóa các hàng khỏi bảng bootstrap trong JavaScript?

Ở đây chúng tôi sẽ sử dụng mã để làm điều này, điều duy nhất là chúng tôi sẽ làm điều đó cho bảng bootstrap để làm cho nó phản hồi nhanh. Để sử dụng bootstrap chúng ta phải nhập thư viện vào tài liệu HTML. Dưới đây. css và. js mà chúng ta sẽ sử dụng trong ví dụ này. -

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Bây giờ chúng ta phải sử dụng các lớp CSS bootstrap như bảng, viền bảng, sọc bảng, v.v. để tạo một bảng bootstrap

Hoàn thành ví dụ để thêm và xóa các hàng trong bảng một cách linh hoạt

	
		 
		[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
		
		
	
	
		

			
Dynamically Add and Delete Table Rows using Javascript
 
			Add New Row
			Delete Row
			


			

				

					
First Name
					
Last Name
					
Mobile No
					
Email ID
					
Action
				
			
		
		
	
	

	

ĐẦU RA

Phần kết luận

Trong bài viết này, bạn đã thấy cách bạn tự động thêm và xóa các hàng trong bảng HTML bằng cách sử dụng JavaScript. Ở đây bạn cũng đã thấy làm việc với bảng bootstrap để làm cho nó phản hồi nhanh

Nếu bạn muốn làm điều tương tự bằng jQuery, hãy truy cập một bài viết khác tại đây Cách thêm và xóa hàng động bằng jQuery

Làm cách nào để xóa hàng khi nhấp trong JavaScript?

Làm cách nào để xóa một hàng khỏi bảng trong JavaScript?

Làm cách nào để xóa hàng của bảng một cách linh hoạt trong JavaScript?

Làm cách nào để thêm và xóa hàng của bảng một cách linh hoạt trong JavaScript?