DOM Lab - Table builder

by Ryan Morris

CSS

.highlight-row{
    
}

JavaScript

// Create a table-building function 
// that will accept some JSON data 
// and generate a table with all the trimmings
//
// It should:
//     build a <thead> element
//     build a <tbody> element
//     include an "actions" column for buttons
//     Add a "remove" button in the actions column
//        which will remove the row when clicked
//     Add a "hover" state to each row so that they highlight
//     BONUS: Display the "favColors" as a comma delimited list

// I'm converting an object to a JSON string
// to simulate the code receiving JSON from a resource
var jsonData = JSON.stringify({
    data: [
        {
            name: "Jim",
            age: 50,
            favColors: ["blue"]
        },
        {
            name: "Bob",
            age: 30,
            favColors: []
        },
        {
            name: "Rachel",
            age: 40,
            favColors: ["red", "green"]
        }  
    ]
});

// start with "jsonData" 
//console.log(jsonData);

/* your code here */