mercredi 17 juin 2015

Javascript - return dynamic row data with checkbox input

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();




Aucun commentaire:

Enregistrer un commentaire