Countries Table (task with DOM and jQuery)

You are given and HTML table holding countries and their capitals. You need to implement a [Create] link to create a new country and for each existing country implement [Up], [Down] and [Delete] links to manipulate its position in the table.

The table needs to have the following entries when it’s initialized (add them when your functions starts):

Bulgaria, Sofia
Germany, Berlin
Russia, Moscow

HTML and JavaScript Code - You are given the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countries Table</title>
    <style>
        td, th { background: #DDD; padding: 5px 10px }
        input[type='text'] { width: 60px }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script src="initialize-table.js"></script>
</head>
<body>
<table id="countriesTable">
    <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>Action</th>
    </tr>
    <tr>
        <td><input type="text" id="newCountryText" /></td>
        <td><input type="text" id="newCapitalText" /></td>
        <td><a href="#" id="createLink">[Create]</a></td>
    </tr>
</table>
<script>$(() => initializeTable())</script>
</body>
</html>

Example:

My HTML solution with the jQuery code inside:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        td, th {
            background: #DDD;
            padding: 5px 10px
        }

        input[type='text'] {
            width: 60px
        }
    </style>
    <!--<script src="https://code.jquery.com/jquery-3.2.1.js"></script>-->
    <script src="src/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="countriesTable">
    <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>Action</th>
    </tr>
    <tr>
        <td><input type="text" id="newCountryText"/></td>
        <td><input type="text" id="newCapitalText"/></td>
        <td><a href="#" id="createLink">[Create]</a></td>
    </tr>
</table>
<script>$(() => initializeTable())</script>

<script>
    function initializeTable() {
        $("#createLink").click(createCountry);
        addCountryToTable("Bulgaria", "Sofia");
        addCountryToTable("Germany", "Berlin");
        addCountryToTable("Rissia", "Moscow");
        foxRowLinks();

        function createCountry() {
            let country = $('#newCountryText').val();
            let capital = $('#newCapitalText').val();
            addCountryToTable(country, capital, true);
            $('#newCountryText').val('');
            $('#newCapitalText').val('');
            fixRowLinks();
        }

        function addCountryToTable(country, capital) {
            let row = $('<tr>')
                    .append($("<td>").text(country))
                    .append($("<td>").text(capital))
                    .append($("<td>")
                            .append($("<a href='#'>[Up]</a>").click(moveRowUp))
                            .append(" ")
                            .append($("<a href='#'>[Down]</a>").click(moveRowDown))
                            .append(" ")
                            .append($("<a href='#'>[Delete]</a>").click(deleteRow)));
            row.css('display', 'none');
            $("#countriesTable").append(row);
            row.fadeIn();
        }

        function moveRowUp() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.insertBefore(row.prev());
                row.fadeIn();
                fixRowLinks();
            });
        }

        function moveRowDown() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.insertAfter(row.next());
                row.fadeIn();
                fixRowLinks();
            });
        }

        function deleteRow() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.remove();
                fixRowLinks();
            });
        }

        function deleteRow() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.remove();
                fixRowLinks();
            });
        }

        function fixRowLinks() {
            // Show all links in the table
            $('#countriesTable a').css('display', 'inline');

            // Hide [Up] link in first table data row
            let tableRows = $('#countriesTable tr');
            $(tableRows[2]).find("a:contains('Up')")
                    .css('display', 'none');

            // Hide the [Down] link in the last table row
            $(tableRows[tableRows.length - 1]).find("a:contains('Down')")
                    .css('display', 'none');
        }
    }
</script>

</body>
</html>

Below is ONLY the function initializeTable():

<script>
    function initializeTable() {
        $("#createLink").click(createCountry);
        addCountryToTable("Bulgaria", "Sofia");
        addCountryToTable("Germany", "Berlin");
        addCountryToTable("Rissia", "Moscow");
        foxRowLinks();

        function createCountry() {
            let country = $('#newCountryText').val();
            let capital = $('#newCapitalText').val();
            addCountryToTable(country, capital, true);
            $('#newCountryText').val('');
            $('#newCapitalText').val('');
            fixRowLinks();
        }

        function addCountryToTable(country, capital) {
            let row = $('<tr>')
                    .append($("<td>").text(country))
                    .append($("<td>").text(capital))
                    .append($("<td>")
                            .append($("<a href='#'>[Up]</a>").click(moveRowUp))
                            .append(" ")
                            .append($("<a href='#'>[Down]</a>").click(moveRowDown))
                            .append(" ")
                            .append($("<a href='#'>[Delete]</a>").click(deleteRow)));
            row.css('display', 'none');
            $("#countriesTable").append(row);
            row.fadeIn();
        }

        function moveRowUp() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.insertBefore(row.prev());
                row.fadeIn();
                fixRowLinks();
            });
        }

        function moveRowDown() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.insertAfter(row.next());
                row.fadeIn();
                fixRowLinks();
            });
        }

        function deleteRow() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.remove();
                fixRowLinks();
            });
        }

        function deleteRow() {
            let row = $(this).parent().parent();
            row.fadeOut(function () {
                row.remove();
                fixRowLinks();
            });
        }

        function fixRowLinks() {
            // Show all links in the table
            $('#countriesTable a').css('display', 'inline');

            // Hide [Up] link in first table data row
            let tableRows = $('#countriesTable tr');
            $(tableRows[2]).find("a:contains('Up')")
                    .css('display', 'none');

            // Hide the [Down] link in the last table row
            $(tableRows[tableRows.length - 1]).find("a:contains('Down')")
                    .css('display', 'none');
        }
    }
</script>

Q: Countries Table (task with DOM and jQuery)

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Countries Table (task with DOM and jQuery)

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions