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

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

1 个答案: