[JavaScript] Thêm dòng mới vào bảng dữ liệu từ form

Tạo form nhập và kiểm tra tính hợp lệ của dữ liệu. Nếu dữ liệu hợp lệ thì thêm dòng mới vào bảng.

Nội dung

1. Yêu cầu

Thực hiện các yêu cầu sau (mã lệnh được viết bằng JavaScript)

1. Viết phương thức để thêm 1 dòng dữ liệu vào một bảng và thêm 02 dòng dữ liệu như trong ảnh minh hoạ trên.

2. Khi người dùng nhấn btnThem (“Thêm”) thì thêm 01 dòng dữ liệu với nội dung trong các điều khiển textbox: txtTenVXL, txtHang, txtNgayramat, txtGia.

Chú ý: kiểm tra tính hợp lệ của dữ liệu, chẳng hạn, ngày ra mắt không thể lớn hơn ngày hiện tại.

Live demo: https://ttnguyenblog.github.io/bai-thuc-hanh-8/

Source code: https://github.com/ttnguyenblog/bai-thuc-hanh-8

Sự kiện onload() trong javascript

Sự kiện onload có ý nghĩa rằng khi trình duyệt đã load xong mọi thứ (image, js, css) thì những đoạn code nằm bên trong đó mới được chạy.
Trong ví dụ này, sự kiện onload được sử dụng để gọi hàm loadData() sau khi toàn bộ trang web đã được tải xong. Điều này đảm bảo rằng khi người dùng truy cập vào trang web, dữ liệu sẽ được hiển thị trong bảng ngay từ đầu mà không cần người dùng thực hiện bất kỳ thao tác nào.

HTML:

<body onload="loadData()">
...
</body>

Định dạng tiền trong javascript

Hàm formatMoneyVND được định nghĩa để định dạng số tiền theo định dạng tiền tệ của Việt Nam (VND). Hàm này nhận một đối số money là số tiền cần được định dạng.

Cách thức hoạt động của hàm formatMoneyVND như sau:

Kiểm tra nếu money có giá trị bằng 0, thì trả về 0.
Chuyển đổi số money thành một chuỗi, sau đó đảo ngược thứ tự các ký tự trong chuỗi bằng cách sử dụng split('').reverse().join('') và lưu vào biến tmp.
Khởi tạo một mảng formatted để lưu các phần tử đã định dạng.
Lưu độ dài của tmp vào biến len.
Sử dụng vòng lặp while để loại bỏ dấu ‘,’ trong tmp.
Sử dụng vòng lặp while để đảm bảo độ dài của tmp chia hết cho 3. Nếu không chia hết, thêm ký tự ‘0’ vào cuối tmp.
Sử dụng vòng lặp for để chia tmp thành các phần tử có độ dài 3 và lưu vào mảng formatted.
Đảo ngược thứ tự các ký tự trong formatted bằng cách sử dụng toString().split('').reverse().join('') và gán lại vào formatted.
Sử dụng vòng lặp while để loại bỏ các ký tự ‘0’ và ‘,’ ở đầu formatted.
Sử dụng vòng lặp for để thay thế dấu ‘,’ thành dấu ‘.’ trong formatted.
Trả về formatted là số tiền đã được định dạng.

Với hàm formatMoneyVND, bạn có thể truyền một số tiền và nó sẽ trả về chuỗi đại diện cho số tiền đó với định dạng tiền tệ VND, ví dụ: formatMoneyVND(3450000) sẽ trả về chuỗi '3.450.000'.

// Định dạng tiền

function formatMoneyVND(money) {
    if (money === 0) {
        return 0;
    }
    var tmp = money.toString().split('').reverse().join('');
    var formatted = [];
    var len = tmp.length;
    var b = true;
    while (b) {
        if (tmp.indexOf(',') > 0) {
            tmp = tmp.replace(',', '');
            b = true;
        } else {
            b = false;
        }
    }
    b = true;
    while (b) {
        len = tmp.length;
        if (len % 3 !== 0) {
            tmp = tmp.toString() + '0';
            b = true;
        } else {
            b = false;
        }
    }
    for (var i = 0; i < tmp.length; i += 3) {
        formatted.push(tmp[i] + tmp[i + 1] + tmp[i + 2]);
    }
    formatted = formatted.toString().split('').reverse().join('');
    b = true;
    while (b) {
        if (formatted[0] === '0' || formatted[0] === ',') {
            formatted = formatted.substr(1);
            b = true;
        } else {
            b = false;
        }
    }
    for (var index = 0; index < formatted.length; index++) {
        if (formatted[index] === ',') {
            formatted = formatted.replace(',', '.');
        }
    }
    return formatted;
}

Load Data vào bảng trong javascript

Hàm để tải dữ liệu và thêm dữ liệu vào bảng.

Hàm addData(element) được sử dụng để thêm dữ liệu vào bảng.
- Đầu tiên, chúng ta sử dụng phương thức insertRow() để tạo một hàng mới trong bảng.
- Sau đó, chúng ta sử dụng phương thức insertCell() để tạo các ô mới trong hàng và gán giá trị từ thuộc tính của element vào các ô tương ứng. Cụ thể:
  - element.STT gán cho ô đầu tiên (STT).
  - element.Ten gán cho ô thứ hai (Tên VXL).
  - element.Hang gán cho ô thứ ba (Hãng sản xuất).
  - element.NgaySX gán cho ô thứ tư (Ngày ra mắt).
  - element.Gia được định dạng bằng hàm formatMoneyVND và gán cho ô thứ năm (Giá).
Hàm loadData() được sử dụng để tải dữ liệu từ mảng dulieu và thêm vào bảng. Hàm này sử dụng vòng lặp forEach để duyệt qua từng phần tử của dulieu và gọi hàm addData để thêm dữ liệu vào bảng.

Khi trang web được tải, sự kiện onload được gọi và hàm loadData() được thực thi để tải dữ liệu từ dulieu và hiển thị trong bảng.

//Load data
var table = document.getElementById('myTable');

function addData(element) {
    var row = table.insertRow();
    row.insertCell().innerHTML = element.STT;
    row.insertCell().innerHTML = element.Ten;
    row.insertCell().innerHTML = element.Hang;
    row.insertCell().innerHTML = element.NgaySX;
    row.insertCell().innerHTML = formatMoneyVND(element.Gia);
}

function loadData() {
    dulieu.forEach(addData);
}

Trên đây là hướng dẫn cách thêm dòng mới vào bảng dữ liệu từ form javascript trong chuỗi bài tập thực hành môn lập trình web. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.

1. Yêu cầu

Sự kiện onload() trong javascript

Định dạng tiền trong javascript

Load Data vào bảng trong javascript

Nguyễn Tiến Trường