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

Question

我似乎无法思考如何处理带有溢出单元格的表格并将这些单元格中的数据添加到另一个单元格中。我知道我的解释有点含糊，但请查看图片。

最终输出应如下所示：

目前我正在开发一个名为 jQuery 的库jquery-csv，并使用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

很高兴有人回答你。我只是为了练习而开发我之前对您之前问题的回答，好吗？

所以，关于最后一个答案的大问题是打印格式，所以我们需要做的就是调整它。例如，如果您想要一个带有标题的行，您应该循环并打印它。像这样：

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

Answer 2

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

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 演示