Javascript - return dynamic row data with checkbox input

Question

I seem to only be able to find the answer to this problem in JQuery and I would really like a pure JS solution.

I have a dynamically generated table that I build from a parsed JSON file. I added a checkbox for each row. My question is, do I also have to generate a unique ID or Class for each cell? How can I return a variable containing the data from just the row selected?

var watchLog = new XMLHttpRequest();
var rowChecked;
watchLog.onreadystatechange = function () {
    if(watchLog.readyState === 4) {
    var status = JSON.parse(watchLog.responseText);
    var watchLogCell = '';

    for (var i = 0; i < status.length; i += 1) {

        watchLogCell += '<tr>';

        watchLogCell += '<th scope="row" class="rowHeader"><input type="checkbox" name="selectRow' + i + '" 
        onclick="function rowData(){if(this.checked){rowChecked = ' + status[i]["Load ID"] + '; return console.log(rowChecked);};">'; 

        watchLogCell += '<td>' + status[i]["Load ID"] + '</td>';
        watchLogCell += '<td>' + status[i]["Carrier Name"] + '</td>';
        watchLogCell += '<td>' + status[i]["Original PU Date"] + '</td>';
        watchLogCell += '<td>' + status[i]["Current PU Date"] + '</td>';
        watchLogCell += '<td>' + status[i]["Vendor Name"] + '</td>';
        watchLogCell += '<td>' + status[i]["Original DO Date"] + '</td>';
        watchLogCell += '<td>' + status[i]["Current DO Date"] + '</td>';
        watchLogCell += '<td>' + status[i]["Load Status"] + '</td>';
        watchLogCell += '<td>' + status[i]["Truck Status"] + '</td>';
        watchLogCell += '<td>' + status[i]["DA First"] + '</td>';
        watchLogCell += '<td>' + status[i]["PO Number"] + '</td>';
        watchLogCell += '<td>' + status[i]["Buyer No"] + '</td>';
        watchLogCell += '<td>' + status[i]["Comments"] + '</td>'
        watchLogCell += '</tr>';



    }

    document.getElementById('tableBody').innerHTML = watchLogCell;



}

};

watchLog.open('GET', 'watchlogic.json');
watchLog.send();

Answer 1

You can try something like

//use this to store the mapping of values, assuming loadid is unique for each record else a unique property of the record has to be used
var watchlogic = {};

var watchLog = new XMLHttpRequest();
watchLog.onreadystatechange = function () {
    if (watchLog.readyState === 4) {
        var status = JSON.parse(watchLog.responseText);
        var watchLogCell = '';

        for (var i = 0; i < status.length; i += 1) {
            //store the record in watchlogic with key as the unique value
            watchlogic[status[i]["Load ID"]] = status[i];

            watchLogCell += '<tr>';

            watchLogCell += '<th scope="row" class="rowHeader"><input type="checkbox" name="selectRow' + i + '" onclick="onSelect(this)" data-loadid="' + status[i]["Load ID"] + '">'; //store the current record's unique value in an attribute

            watchLogCell += '<td>' + status[i]["Load ID"] + '</td>';
            watchLogCell += '<td>' + status[i]["Carrier Name"] + '</td>';
            watchLogCell += '<td>' + status[i]["Original PU Date"] + '</td>';
            watchLogCell += '<td>' + status[i]["Current PU Date"] + '</td>';
            watchLogCell += '<td>' + status[i]["Vendor Name"] + '</td>';
            watchLogCell += '<td>' + status[i]["Original DO Date"] + '</td>';
            watchLogCell += '<td>' + status[i]["Current DO Date"] + '</td>';
            watchLogCell += '<td>' + status[i]["Load Status"] + '</td>';
            watchLogCell += '<td>' + status[i]["Truck Status"] + '</td>';
            watchLogCell += '<td>' + status[i]["DA First"] + '</td>';
            watchLogCell += '<td>' + status[i]["PO Number"] + '</td>';
            watchLogCell += '<td>' + status[i]["Buyer No"] + '</td>';
            watchLogCell += '<td>' + status[i]["Comments"] + '</td>'
            watchLogCell += '</tr>';



        }

        document.getElementById('tableBody').innerHTML = watchLogCell;



    }

};

watchLog.open('GET', 'watchlogic.json');
watchLog.send();


function onSelect(el) {
    //here el is the clicked element then use the data attribute value to get the unique valeu of the record and use that to get the record form the watchlogic object
    var status = watchlogic[el.dataset.loadid]; //or this.getAttribute('data-loadid') for <= IE10
    console.log(status)
}