Table Builder (Object Interacting with DOM)

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

1 Answer

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

Q: Table Builder (Object Interacting with DOM)

Examples:

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: Table Builder (Object Interacting with DOM)

Examples:

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