How Do I Turn A Table Cell Into A Clickable Link That Displays Hidden Column Contents?

I have a script that generates a dynamic table from values stored in an array. Though the array has seven properties (equivalent to seven columns), the dynamic table is designed t

Solution 1:

One solution would be to not use anchor tags and instead use JS event listeners.

You would need to assign a unique 'id' to each row in the column.

Add event listeners to either each row and screen for the user clicking the status button/image OR add event listeners to each status button/image and traverse the HTML tree to see which row the button belongs to.

Once you know the row that got called, you can then use JS to extract the information and package it up into an object for your bootstrap modal/card.

UPDATE: You could do something like this,

// after you insert a new row you get the element node back...var newRow = table.insertRow(table.length);
// assign a unique id value to it
newRow.id = 'something';

// add an event listener to the row
newRow.addEventListener('click', event => {
    // when someone clicks on the ROW, you get a hit, but you're not sure what part of the row they clicked on...//...so create a check to make sure they clicked on the buttonif (event.target === 'some_way_to_indicate_the_status_button') {
        let row_number = event.target.id;

        // use the row number to grab all data from that row// package all of that data into an object {} or array, whichever you choose, then do what you want with it
    }
});