最后的最终代码

Question

我似乎无法决定如何使用溢出的单元格来访问表并将数据添加到另一个单元格中的这些单元格中。我知道我的解释有点模糊，但请检查图像。

最终输出应如下所示：

当前，我正在使用一个名为jquery-csv的jQuery库，并使用方法csv.toArrays()来给我一个数组作为输出。从我的JSFiddle开始，我坚持将join()的值添加到正确的位置。因此，在循环中，我正在检查它是否是数组的第4个元素，然后将其后的其余数据连接到单个字符串中并添加到上一个单元格中。我的问题是如何将添加的连接字符串添加到上一个单元格中？我们将不胜感激。

function generateTable(data) {
var html;
var overflow;
for(var row in data) {
    html += '<tr>\r\n';
    var myStr = [];
    var almost;
    for(var item in data[row]) {
        //html += '<td>' + data[row][item] + '</td>\r\n';
        if(data[row].indexOf(data[row][item]) < 4){
                html += '<td>' + data[row][item] + '</td>\r\n';
        }else{
                myStr.push(data[row][item]);
            console.log(myStr);
            almost = myStr.join(":");
                console.log(almost); 
        }

    }
    console.log("this : " + almost); //items all joined
    html += '</tr>\r\n';
}
return html;
}

Answer 1

您可以尝试以下逻辑，在其中可以为最后一列创建单独的文本并将其附加。

var input = $('#here').val();
var data = $.csv.toArrays(input);
function generateTable(data) {
var html;
var overflow;
for(var row in data) {
    html += '<tr>\r\n';
    var myStr = [];
    var almost;
    var lastCol = "<td>";
    var count=0;
    for(var item in data[row]) {
        //html += '<td>' + data[row][item] + '</td>\r\n';
        if(count < 3){
                html += '<td>' + data[row][item] + '</td>\r\n';
        }else{
            if(count>=4) {
              lastCol +=  ":";
            }
            lastCol +=  data[row][item];
        }
       count++;
    }
    lastCol += "</td>";
    console.log("this : " + almost); //items all joined
    html += lastCol + '</tr>\r\n';
}
return html;
}

$("#result").html(generateTable(data));

console.log(data);

JSFiddle Demo

Answer 2

很高兴有人回答了你。我只是将my previous answer开发到your previous question只是为了练习，好吗？

因此，关于最后一个答案的重要事项是打印格式，因此我们需要做的就是调整它。例如，如果要用标题代替一行，则应循环并打印该行。像这样：

            // just adding a loop to headers:
            html += '<tr>\r\n';
            for(var item in header) {
                html += '<td>' + header[item] + '</td>\r\n';
            }
            html += '</tr>\r\n';

就是这样。所有标头值都将作为特定表行上的表单元格读取。

第二步是从其他单元格中删除标头信息：

            for(var row in rows) {
                html += '<tr>\r\n';
                for(var item in rows[row]) {
                    html += '<td>' + rows[row][item].join(agregator) + '</td>\r\n';
                }
                html += '</tr>\r\n';
            }

最后的最终代码

        var separator = ",",
            agregator = ":";
        function generateTable(lines) {
            if (typeof(lines) === 'undefined' || lines.length == 0) {
                return '';
            }
            var header = lines[0].split(separator);
            var html = '';
            var rows = [];
            // mapping
            for (var row in lines) {
                if(row == 0) {
                    continue;
                }
                var cols = lines[row].split(separator),
                    values = {};
                for (var col in cols) {
                    var item = header[col] ? header[col] : header[header.length-1];
                    if(values[item]) {
                        values[item].push(cols[col]);
                    } else {
                        values[item] = [cols[col]];
                    }
                }
                rows.push(values);
            }
            // printing
            // just adding a loop to headers:
            html += '<tr>\r\n';
            for(var item in header) {
                html += '<td>' + header[item] + '</td>\r\n';
            }
            html += '</tr>\r\n';
            for(var row in rows) {
                html += '<tr>\r\n';
                for(var item in rows[row]) {
                    html += '<td>' + rows[row][item].join(agregator) + '</td>\r\n';
                }
                html += '</tr>\r\n';
            }
            return html;
        }

        $.ajax({
            type: "GET",
            url: "test.csv",
            dataType: "text",
            success: function(response) {
                $('#result').html(generateTable($.csv.parsers.splitLines(response)));
            }
        });

我带了您的JSFiddle在这里进行测试：http://jsfiddle.net/xpvt214o/693555/只是更改了$ .ajax部分。我认为它可以与任何CSV文件一起使用。

在具有标题的单元格中添加溢出表单元格

2 个答案:

最后的最终代码