Javascript - 使用复选框输入返回动态行数据

Question

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

我有一个从解析的 JSON 文件构建的动态生成的表。我为每一行添加了一个复选框。我的问题是，我是否还必须为每个单元格生成唯一的 ID 或类？如何返回仅包含所选行数据的变量？

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