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

Trong bài viết này, chúng ta sẽ tìm hiểu cách để thêm dòng mới vào bảng dữ liệu javascript từ một form nhập liệu, bao gồm việc kiểm tra tính hợp lệ của dữ liệu trước khi thêm dòng mới.

Xem thêm:

thẻ select trong html

kiểm tra cung hoàng đạo javascript

Nội dung

1. Mô tả bài toán

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/them-dong-moi-vao-bang-javascript/

Source code: https://github.com/ttnguyenblog/them-dong-moi-vao-bang-javascript

Lưu ý: Khum tải được tài liệu, liên hệ ngay fanpage để được hỗ trợ ạ!

2. Hướng dẫn thực hiện

2.1 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 minh họa:

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

2.2 Đị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;
}

2.3 Thêm dữ liệu vào bảng

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);
}

3. Kiểm tra tính hợp lệ của dữ liệu

//Kiểm tra trùng dữ liệu

function kiemtra(){

    var checkTrung = false;
    for (var i = 0; i < dulieu.length; i++) {
        if (dulieu[i].Ten.trim().toLowerCase() === txtTen.value.trim().toLowerCase()) {
            checkTrung = true;
            break;
        }
    }
    return checkTrung;
}


//Check dữ liệu

function checkThongTin(){

    var txtTen = document.getElementById('txtTen');
    var txtHang = document.getElementById('txtHang');
    var dNgaySX = document.getElementById('dNgaySX');
    var fGia = document.getElementById('fGia');

    var checkTen = document.getElementById('checkTen');
    var checkHang = document.getElementById('checkHang');
    var checkNgaySX = document.getElementById('checkNgaySX');
    var checkGia = document.getElementById('checkGia');

    //Kiểm tra tên

    if(txtTen.value==''){
        checkTen.innerHTML='<span>Không được để trống!</span>';
    }else if (kiemtra()){
        checkTen.innerHTML='<span>Sản phẩm đã tồn tại!</span>';
    }else{
        checkTen.innerHTML='';
    }


    // kiểm tra hãng
    if(txtHang.value===''){
        checkHang.innerHTML='<span>Không được để trống!</span>';
    }else{
        checkHang.innerHTML='';
    }



    // kiểm tra ngày sản xuất
    if(dNgaySX.value.trim().length==0){
        checkNgaySX.innerHTML='<span>Không được để trống!</span>';
    }else if (Date.parse(dNgaySX.value) >= Date.now()) {
        checkNgaySX.innerHTML='Ngày sản xuất không được lớn hơn ngày hiện tại';
    }else{
        checkNgaySX.innerHTML='';
    }


    //kiểm tra giá
    if(fGia.value===''){
        checkGia.innerHTML='<span>Không được để trống!</span>';
    }else if (isNaN(parseInt(fGia.value))) {
        checkGia.innerHTML='Nhập sai định dạng giá';
    }else{
        checkGia.innerHTML='';
    }

    if(checkTen.innerHTML === '' && checkHang.innerHTML === '' && checkNgaySX.innerHTML === '' && checkGia.innerHTML === ''){
        them();
    }

}

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.

Bài viết liên quan:

Bài thực hành lập trình web 4: Grid View

Bài thực hành lập trình web Responsive: Dàn trang