settingsAccountsettings
Menusettings

Q: Table Builder (Object Interacting with DOM)

+2 votes

Write a JavaScript function to return a table builder object. It should take a DOM selector as input parameter and return as an output an object holding two functions: createTable(columnNames) and fillData(dataRows).

function tableBuilder(selector) {
    // TODO: return { … }
}

The createTable(columnNames) function replaces the content in the target DOM element with a new HTML table holding a row with table headings given in the columnNames, and an additional column “Action”.

The fillData(dataRows) function puts in the table inside the target DOM element table rows holding the provided dataRows (array of arrays of strings). Add a [Delete] button in the last column. Clicking the [Delete] button should delete the entire table row.

Note that the table column names and table data cells may hold special characters that should be displayed as text.

Examples:

This is an example how the table builder function is intended to be used. Assume we have the following HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Table Builder</title>
    <style>td,th { background:#DDD; padding:5px }</style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="main"></div>
<script>
    function tableBuilder(selector) {
        // TODO: return { … }
    }
</script>
<script>
    $(function() {
        let builder = tableBuilder("#main");
        builder.createTable(['Name', 'Town']);
        builder.fillData([
            ['Maria', 'Sofia'],
            ['Kiril', 'Varna'],
            ['Ani <new>', 'Ruse'],
        ]);
    });
</script>
</body>
</html>

This is how the HTML and DOM should look like after the above code is loaded in a Web browser:

table builder 1

Clicking the [Delete] button at the row “Kiril / Varna” should delete this row:

table builder task 2

 

asked in JavaScript category by user eiorgert

1 Answer

+1 vote

Here is the HTML + JavaScript code inside:

<!DOCTYPE html>
<html>
<head>
    <title>Table Builder</title>
    <style>td, th {
        background: #DDD;
        padding: 5px
    }</style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main"></div>
<script>
    function tableBuilder(selector) {
        let container = $(selector);

        return {
            createTable: function (arr) {
                container.empty();
                let table = $("<table>");
                let row = $("<tr>");
                for (let column of arr) {
                    let col = $("<th>");
                    col.text(column);
                    row.append(col);
                }

                let actionCol = $("<th>");
                actionCol.text("Action");
                row.append(actionCol);
                row.appendTo(table);
                container.append(table);
            },
            fillData: function (rows) {
                let table = container.find("table");
                for (let row of rows) {
                    let tr = $('<tr>');
                    for (let el of row) {
                        let td = $('<td>');
                        td.text(el);
                        tr.append(td);
                    }
                    let delTd = $('<td>');
                    let button = $("<button>");
                    button.text("Delete");
                    delTd.append(button);
                    tr.append(delTd);
                    tr.appendTo(table);
                }
                $('button').on("click", function () {
                    $(this).parent().parent().remove();
                })
            }
        }
    }
</script>
<script>
    $(function () {
        let builder = tableBuilder("#main");
        builder.createTable(['Name', 'Town']);
        builder.fillData([
            ['Maria', 'Sofia'],
            ['Kiril', 'Varna'],
            ['Ani <new>', 'Ruse']
        ]);
    });
</script>
</body>
</html>

Only the function tableBuilder():

function tableBuilder(selector) {
    let container = $(selector);

    return {
        createTable: function (arr) {
            container.empty();
            let table = $("<table>");
            let row = $("<tr>");
            for (let column of arr) {
                let col = $("<th>");
                col.text(column);
                row.append(col);
            }

            let actionCol = $("<th>");
            actionCol.text("Action");
            row.append(actionCol);
            row.appendTo(table);
            container.append(table);
        },
        fillData: function (rows) {
            let table = container.find("table");
            for (let row of rows) {
                let tr = $('<tr>');
                for (let el of row) {
                    let td = $('<td>');
                    td.text(el);
                    tr.append(td);
                }
                let delTd = $('<td>');
                let button = $("<button>");
                button.text("Delete");
                delTd.append(button);
                tr.append(delTd);
                tr.appendTo(table);
            }
            $('button').on("click", function () {
                $(this).parent().parent().remove();
            })
        }
    }
}

 

answered by user paulcabalit
...