Cách tránh chèn giá trị NULL vào bảng với JavaScript

Để ngăn chặn việc chèn giá trị null vào bảng, bạn cần kiểm tra điều kiện trước khi thêm dữ liệu. Logic kiểm tra null nên được viết như sau:

while (!(yourVariableName1 == null || yourVariableName2 == null || yourVariableName3 == null ... N)) {
    // yourStatement1
    ...
    // yourStatementN
}

Logic trên sẽ không bao giờ cho phép chèn các giá trị null. Bạn có thể sử dụng vòng lặp for để chèn giá trị vào bảng mà không có null. Dưới đây là ví dụ hoàn chỉnh:

Ví dụ minh họa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo chèn giá trị vào bảng</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h2>Demo chèn giá trị vào bảng bằng JavaScript</h2>
    <p>Đây là demo về mảng JavaScript</p>
    <p id="demo"></p>
    <script>
        var index = 0;
        var firstNameArray = new Array();
        var lastNameArray = new Array();
        var firstName = "";
        var lastName = "";
        
        while (!(firstName == null || lastName == null)) {
            firstName = prompt("Vui lòng nhập Tên (First Name) = ");
            lastName = prompt("Vui lòng nhập Họ (Last Name) = ");
            firstNameArray[index] = firstName;
            lastNameArray[index] = lastName;
            index++;
        }
        
        document.writeln("<table border='1' width='50%'>");
        document.writeln("<caption>BẢNG DEMO TRONG JAVASCRIPT</caption>");
        document.writeln("<th>FirstName</th><th>LastName</th>");
        
        for (var startIndex in firstNameArray) {
            if (firstNameArray[startIndex] !== null && lastNameArray[startIndex] !== null) {
                document.writeln("<tr><td>" + firstNameArray[startIndex] + "</td><td>" + lastNameArray[startIndex] + "</td></tr>");
            }
        }
        document.write("</table>");
    </script>
</body>
</html>

Cách chạy chương trình

Lưu file với tên anyName.html (hoặc index.html), nhấp chuột phải vào file và chọn Open with Live Server trong trình soạn thảo VS Code.

Kết quả đầu ra

Chương trình sẽ hiển thị các hộp thoại nhập liệu lần lượt cho First Name và Last Name. Khi bạn nhấn Cancel (trả về null) ở cả hai lần, vòng lặp dừng lại và bảng dữ liệu được render ra màn hình.