Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic HTML Table</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {

            let currentRow = null;

            $('#insertRowBtn').click(function() {
                var newRow = '<tr>' +
                    '<td><input type="text" class="rollNo"></td>' +
                    '<td><input type="text" class="name"></td>' +
                    '<td><input type="text" class="gender"></td>' +
                    '<td><input type="text" class="age"></td>' +
                    '</tr>';
                $('table tbody').append(newRow);
            });

            $(document).on('focus', 'input', function() {
                currentRow = $(this).closest('tr');
            });

            $('#deleteRowBtn').click(function() {
                if (currentRow) {
                    currentRow.remove();
                }
            });

            $(document).on('input', '.gender', function() {
                var value = $(this).val();
                if (value !== 'F' && value !== 'M' && value !== 'O') {
                    alert('Invalid gender value. Valid values are F, M, O.');
                    $(this).val('');
                }
                else
                {
                    if (value === 'F') {
                        $(this).closest('tr').css('background-color', 'green');
                    }
                }
            });

            $(document).on('input', '.age', function() {
                var value = $(this).val();
                if (value <= 0 || isNaN(value)) {
                    alert('Invalid age value. Age must be a positive number.');
                    $(this).val('');
                } else {
                    if (value < 18) {
                        $(this).closest('tr').find('.age').css('font-weight', 'bold');
                    } else {
                        $(this).closest('tr').find('.age').css('font-weight', 'normal');
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>RollNo.</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" class="rollNo"></td>
                <td><input type="text" class="name"></td>
                <td><input type="text" class="gender"></td>
                <td><input type="text" class="age"></td>
            </tr>
            <tr>
                <td><input type="text" class="rollNo"></td>
                <td><input type="text" class="name"></td>
                <td><input type="text" class="gender"></td>
                <td><input type="text" class="age"></td>
            </tr>
        </tbody>
    </table>
    <button id="insertRowBtn">Insert Row</button>
    <button id="deleteRowBtn">Delete Current Row</button>
</body>
</html>