Bảng động html

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 Nội dung chính Hiển thị Các bước. JavaScript thêm hàng vào bảng động bước. JavaScript tự động xóa các hàng của bảng Ảnh chụp màn hình của các bảng bổ sung/xóa Những bài viết liên quan Đô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 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ỏ trong bảng HTML bằng JavaScript. < td> của bảng tự động sử dụng JavaScript cho nhiều hàng. Chúng tôi không thể cho rằng chúng tôi nên cung cấp bao nhiêu trường trên trang web. Giống như, chúng tôi cần cung cấp một số thông tin chi tiết về nhân viên. Không có gì chắc chắn về việc có bao nhiêu thông tin chi tiết về 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 xóa động trong bảng HTML bằng JavaScript. Trong bài đăng này, chúng tôi sẽ cung cấp hai nút, đầu tiên để thêm hàng mới vào bảng và thứ hai để xóa hàng. Mã sẽ bổ sung hoặc xóa toàn bộ hàng hóa 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 tra, truy cập và thao tác các phần tử HTML một cách hành độ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 bảng HTML bằng các trường của họ một cách linh hoạt. JavaScript là một ngôn ngữ động. Điều đó 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 linh hoạt ở 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 trong bảng HTML với các trường của chúng một cách linh hoạt Mã dưới đây có dạng HTML và hai hàm javascript.   . addRows() và deleteRows(), tương ứng 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 cho 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 trên bảng bằng JavaScript, chúng tôi đã đưa ID 'emptbl' vào bảng. phần tử biểu mẫu có 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 của biểu mẫu. Để thực hiện các thao tác động trên bảng bằng JavaScript, chúng tôi đã cung cấp id 'emptbl' cho bảng

Các bước. JavaScript thêm hàng vào bảng động

Đây là giải mã từng bước giải thích 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'. Nút Thêm Hàng'

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 bảng hà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ó bảng tử với bảng ID và lưu trữ nó trong bảng biến JavaScript. - 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 lấy phần tử bảng có id bảng và lưu trữ nó trong bảng biến JavaScript

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 in a rowcount variable and row [0]. tế bào. length Aporty Trả về số lượng phần tử trong lần đầu tiên. < tr> sử dụng các hàng thuộc tính Javascript. chiều dài trong biến rowCount và rows[0]. tế bào. thuộc tính độ dài trả về số phần tử < td> trong hàng đầu tiên.

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 (). Chèn hàng()

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 một bảng cách linh hoạt

bước. JavaScript tự động xóa các hàng của bảng

Đây là giải mã từng bước giải thích về cách một hàng hiện bị xóa động khi người dùng nhấp vào nút 'Xóa hàng'. Nút Xóa Hàng'

DELETEROWS ()- Trong phần đầu sau hàm addRows (), chúng tôi đã tạo một hàm tên javaScript khác Deleterows () chịu trách nhiệm xóa các hà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ó bảng tử với bảng ID và lưu trữ nó trong một biến bảng. - Trong phần đầu sau hàm addRows(), chúng ta đã tạo một hàm JavaScript khác có tên là deleteRows() chịu trách nhiệm xóa các hàng trong bảng hiện có với các trường nhập liệu. Đối với điều này, đầu tiên chúng tôi lấy phần tử bảng với id bảng và lưu trữ nó trong một bảng biến

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 thuộc tính hàng hóa. length in a rowcount variable. < tr> sử dụng các hàng thuộc tính. chiều dài trong một biến rowCount.

var rowCount = table.rows.length;

Tiếp theo, sử dụng câu lệnh NẾU khác, chúng tôi đã kiểm tra xem số lượng bảng lớn hơn một hoặc không. Câu lệnh NẾU Khác, chúng ta đã kiểm tra xem số hàng của bảng có lớn hơn 1 hay không

if(rowCount > '2'){

}

Nếu đó là sự thật, thì nó sẽ xóa một hàng có thuộc tính JavaScript Deleterow () và giảm số lượng hàng. TRUE, sau đó nó xóa một hàng bằng thuộc tính JavaScript deleteRow() và giảm số lượng hàng xuống một

var row = table.deleteRow(rowCount-1);
rowCount--;

Chúng tôi hy vọng mã này sẽ 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 bảng ID và cột ID. id bảng và id cột