Làm cách nào để thêm dữ liệu vào bảng bằng JavaScript?

element and inserts it into the table. It takes an index as a parameter that defines the location of the table where a row will be added. If “0” or no index will be passed in a method, this method adds the row at the start of the table.

Nội dung chính Show

ví dụ 1. Thêm một hàng ở trên cùng/bắt đầu của bảng
ví dụ 2. Thêm một hàng vào cuối bảng
Phương pháp 2. Thêm hàng vào bảng HTML bằng cách tạo phần tử mới
Phần kết luận
Làm cách nào để thêm hàng trong bảng bằng JavaScript?
Làm cách nào để thêm dữ liệu vào bảng HTML một cách linh hoạt bằng JavaScript?
Làm cách nào để thêm TD vào bảng trong JavaScript?
Làm cách nào để điền vào bảng trong JavaScript?

Nếu bạn định thêm hàng vào cuối/cuối bảng, hãy chuyển chỉ mục “-1” làm đối số

cú pháp

Sử dụng cú pháp sau để thêm hàng trong bảng với sự trợ giúp của phương thức insertRow()

bảng. insertRow( index );

Ở đây, “chỉ mục” cho biết vị trí mà bạn muốn thêm một hàng mới, chẳng hạn như ở cuối bảng hoặc ở đầu bảng

ví dụ 1. Thêm một hàng ở trên cùng/bắt đầu của bảng

Here, we will create a table and a button in an HTML file using the HTML

The “insertRow()” method is utilized to add a new row at the beginning of the table. It creates a new

and and

elements and the appendChild() method appends the cells and rows in a table.

cú pháp

Thực hiện theo cú pháp được cung cấp để tạo một phần tử mới để thêm một hàng trong bảng bằng JavaScript

tài liệu. createElement("tr");

Ở đây, “tr” là hàng của bảng

Ví dụ

Bây giờ chúng ta sẽ sử dụng cùng một bảng đã tạo trước đó trong HTML với tệp CSS, nhưng trong tệp JavaScript, chúng tôi sẽ sử dụng phương thức “createElement()”. Sau đó, thêm dữ liệu hoặc văn bản vào các ô bằng thuộc tính “innerHTML”. Cuối cùng, gọi phương thức “appendChild()” sẽ thêm các ô trong một hàng và sau đó là hàng trong một bảng

functionaddRow () {
var tableRow = tài liệu. getElementById("bảng");
var row = tài liệu. createElement("tr");
var cell1 = tài liệu. createElement("td");
var cell2 = tài liệu. createElement("td");
var cell3 = tài liệu. createElement("td");
ô1. innerHTML = "Ô của hàng mới";
ô 2. innerHTML = "Ô của hàng mới";
ô 3. innerHTML = "Ô của hàng mới";
hàng. appendChild( ô1 );
hàng. appendChild( ô 2 );
hàng. appendChild( ô 3 );
tableRow. appendChild( hàng );
}

Đầu ra cho thấy hàng mới được thêm thành công vào cuối bảng

Chúng tôi đã tổng hợp tất cả các phương pháp để thêm một hàng trong bảng bằng JavaScript

Phần kết luận

Để thêm một hàng trong bảng, hãy sử dụng hai cách tiếp cận. phương thức insertRow() hoặc tạo một phần tử mới bằng cách sử dụng các phương thức được xác định trước của JavaScript, bao gồm phương thức appendChild() và phương thức createElement(). Bạn có thể thêm một hàng ở đầu bảng bằng cách sử dụng phương thức insertRow() bằng cách chuyển các chỉ mục. Hướng dẫn này giải thích quy trình thêm một hàng mới trong bảng bằng cách nhấp vào nút bằng JavaScript