Добавить ячейку таблицы переполнения в ячейку с заголовком

Question

Кажется, я не могу понять, как мне подойти к таблице с переполненной ячейкой и добавить данные в эту ячейку в другую ячейку. Я знаю, что мои объяснения немного расплывчаты, но посмотрите на изображения.

Окончательный результат должен выглядеть следующим образом:

В настоящее время я работаю над библиотекой jQuery с именем jquery-csv и использую метод csv.toArrays(), который выдает мне массив в качестве вывода. Из моего JSFiddle я застрял в добавлении значения, которое у меня есть join(), в нужное место. Таким образом, в цикле я проверяю, является ли это четвертый элемент массива, а остальные данные после этого должны быть объединены в одну строку и добавлены в предыдущую ячейку. Моя проблема в том, как мне добавить объединенную строку, которую я сделал, в предыдущую ячейку? Помощь будет принята с благодарностью.

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 Demo