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

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 文件。