jqueryhtml-tablejquery-csv

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.

what I have

The final output should look like:

output needed

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

Solution

  • 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