Add overflow table cell in a cell with a header

问题

I can't seems to wrap my mind on how should I approach the table with an overflowed cell and add the data in those cell in another cell. I know my explanation is a bit vague but check the images.

The final output should look like:

Currently I'm working on a jQuery library called jquery-csv and using the method csv.toArrays() which gives me an array as output. From my JSFiddle im stuck in adding the value I have join() into the proper place. So in the loop I'm checking if it's the 4th element of the array then the rest of the data after that should be in joined into a single string and added to the previous cell. My problem is how should I add the joined string I have made into it's previous cell? A help would greatly be appreciated.

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;
}

回答1:

You can try below logic where you can create separate text for last column and append it.

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

回答2:

Glad someone answered you. I'll just develop my previous answer to your previous question just to practice, ok?

So, the big deal here about the last answer was the printing format, so all we need to do is adjust that. For example, if you want a line with the headers instead, you should loop and print that. Like this:

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

That's it. All the header values will be readed as Table Cells on a specific Table Row.

The second step is remove the header information from the other cells:

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

The final code, finally

        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)));
            }
        });

I took your JSFiddle to test here: http://jsfiddle.net/xpvt214o/693555/ just changing the $.ajax part. I think it will work with any CSV file.

来源：https://stackoverflow.com/questions/52054827/add-overflow-table-cell-in-a-cell-with-a-header