在具有 header 的单元格中添加溢出 table 单元格

Question

我似乎想不通我应该如何使用溢出的单元格处理 table 并将这些单元格中的数据添加到另一个单元格中。我知道我的解释有点含糊，但请查看图片。

最终输出应如下所示：

目前我正在开发一个名为 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 to your previous question只是为了练习，好吗？

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

            // 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';

就是这样。所有 header 值将被读取为特定 Table 行上的 Table 个单元格。

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

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

在具有 header 的单元格中添加溢出 table 单元格

Add overflow table cell in a cell with a header

jquery

html-table

jquery-csv

最后的代码，终于