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:

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