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 

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

	
		Add/Delete Table Rows | Javacodepoint 
		
		
		
			#container{
				margin:0px auto;
				text-align:center;
			}
		
	
	
		

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


			
					First Name
					Last Name
					Mobile No
					Email ID
					Action
				
		
		
	
	
		
		/* This method will add a new row */
		function addNewRow[]{
			var table = document.getElementById["employee-table"];
			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 = row.insertCell[i];
				if[i < cellCount-1]{
					cell.innerHTML='';
				}else{
					cell.innerHTML = '';
				}
			}
		}
		
		/* This method will delete a row */
		function deleteRow[ele]{
			var table = document.getElementById['employee-table'];
			var rowCount = table.rows.length;
			if[rowCount