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 ch

Solution 1:

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

var input = $('#here').val();
vardata = $.csv.toArrays(input);
function generateTable(data) {
var html;
var overflow;
for(var row indata) {
    html += '<tr>\r\n';
    var myStr = [];
    var almost;
    var lastCol = "<td>";
    var count=0;
    for(var item indata[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

Solution 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 = ":";
        functiongenerateTable(lines) {
            if (typeof(lines) === 'undefined' || lines.length == 0) {
                return'';
            }
            var header = lines[0].split(separator);
            var html = '';
            var rows = [];
            // mappingfor (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.