Cách thêm cập nhật Xóa hàng bảng Html khỏi văn bản đầu vào trong Javascript
Trong Javascript Hướng dẫn này chúng ta sẽ xem How To :
- thêm hàng vào bảng html từ thẻ đầu vào,
- hiển thị dữ liệu hàng của bảng đã chọn thành văn bản đầu vào,
- cập nhật giá trị ô hàng của bảng đã chọn từ hộp văn bản,
- xóa hàng của bảng đã chọn,
Trong JS Và Netbeans Editor.
Mã nguồn dự án
Thêm Chỉnh sửa Xóa Hàng trong Bảng HTML
. vùng chứa {tràn. ẩn giấu}
. tab{float. bên trái;}
. tab-2{lề trái. 50px}
. đầu vào tab-2{hiển thị. khối; lề-đáy. 10px}
tr{ chuyển tiếp. tất cả. 25s dễ dàng ra vào}
tr. di chuột {màu nền. #EEE;con trỏ. con trỏ}
Tên
Họ
Tuổi
A1 B1 10
A3 B3 30
A2 B2 20
First Name :
Last Name :
Age :
Thêm
Chỉnh sửa
Xóa
var r Index,
bảng = tài liệu. getElementById("bảng");
// kiểm tra đầu vào trống
hàm checkEmptyInput()
{
var isEmpty = sai,
fname = tài liệu. getElementById("tên"). giá trị,
tên = tài liệu. getElementById("tên"). giá trị,
tuổi = tài liệu. getElementById("tuổi"). giá trị;
if(tên===""){
alert("Tên không được để trống");
isEmpty = true;
}
khác nếu (tên === ""){
alert("Họ Không Được Để Trống");
isEmpty = true;
}
khác nếu (tuổi === "") {
alert("Trang không thể để trống");
isEmpty = true;
}
trả lại làEmpty;
}
// thêm Hàng
hàm addHtmlTableRow()
{
// lấy bảng theo id
// tạo hàng và ô mới
// lấy giá trị từ văn bản đầu vào
// đặt các giá trị vào ô hàng
nếu như(. checkEmptyInput()){
var newRow = bảng. chènRow(bảng. chiều dài),
ô1 = newRow. chènCell(0),
ô2 = newRow. chènCell(1),
ô3 = newRow. chènCell(2),
fname = tài liệu. getElementById("tên"). giá trị,
tên = tài liệu. getElementById("tên"). giá trị,
tuổi = tài liệu. getElementById("tuổi"). giá trị;
ô1. InternalHTML = fname;
ô2. InternalHTML = tên;
ô3. InternalHTML = tuổi;
// gọi hàm để thiết lập sự kiện cho hàng mới
đã chọnRowToInput();
}
}
// hiển thị dữ liệu hàng đã chọn thành văn bản nhập
chức năng đã chọnRowToInput()
{
for(var i = 1; i < bảng. hàng. chiều dài;
{
bàn. hàng[i]. title = chức năng()
{
// lấy chỉ mục hàng đã chọn// get the seected row index
r Index = cái này. hàng Index;
tài liệu. getElementById("tên"). giá trị = cái này. ô[0]. bên trongHTML;
tài liệu. getElementById("tên"). giá trị = cái này. ô[1]. bên trongHTML;
tài liệu. getElementById("tuổi"). giá trị = cái này. ô[2]. bên trongHTML;
};
}
}
đã chọnRowToInput();
hàm editHtmlTbleSelectedRow()
{
var fname = tài liệu. getElementById("tên"). giá trị,
tên = tài liệu. getElementById("tên"). giá trị,
tuổi = tài liệu. getElementById("tuổi"). giá trị;
nếu như(. checkEmptyInput()){
bàn. hàng[rIndex]. ô[0]. InternalHTML = fname;
bàn. hàng[rIndex]. ô[1]. InternalHTML = tên;
bàn. hàng[rIndex]. ô[2]. InternalHTML = tuổi;
}
}
hàm removeSelectedRow()
{
bàn. xóaRow(r Index);
// xóa văn bản đã nhập
tài liệu. getElementById("tên"). giá trị = "";
tài liệu. getElementById("tên"). giá trị = "";
tài liệu. getElementById("tuổi"). giá trị = "";
}
ĐẦU RA
Cần thêm?
➜ Khóa học JavaScript
➜ Khóa học phát triển web
➜ Dự án JavaScript