Javascript - return 带有复选框输入的动态行数据

Question

我似乎只能在JQuery中找到这个问题的答案，我真的很想要一个纯JS解决方案。

我有一个动态生成的 table，它是根据已解析的 JSON 文件构建的。我为每一行添加了一个复选框。我的问题是，我是否还必须为每个单元格生成唯一 ID 或 Class？我怎样才能 return 一个只包含所选行的数据的变量？

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

你可以试试

//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)
}