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

Javascript - return dynamic row data with checkbox input

本文关键字：动态 数据 输入 复选框 返回 Javascript      更新时间：2023-09-26

我似乎只能在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();

你可以尝试类似的东西

//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)
}
相关文章：