Member 12974741 Ответов: 2

Генерация HTML-таблицы из массива

У меня есть данные в формате массива, как показано ниже... (пример один) это массив.. Основываясь на данных, мне нужно сгенерировать html-таблицу по пользовательскому условию... скажем, заголовок таблицы будет day1,2,3,4,5,6 и ниже массив должен быть основан для каждого заголовка, чтобы добавить строку в зависимости от условий... Я привел подробности Для справки

var array= [{"day": 1, "summary": "proge1"},
{"день": 1, "резюме": "проге2"},
{"день": 1, "резюме": "проге3"},
{"день":2,"резюме": "вторник 1"},
{"день":2,"резюме": "вторник 2"},
{"день":2,"резюме": "вторник 3"},
{"день": 3, "резюме": "Wed1"},
{"день": 3, "резюме": "Wed2"},
{"день": 3, "резюме": "Wed3 "},
{"день":4,"резюме": "Thur1"},
{"день":4,"резюме": "Thur2"},
{"день": 5, "резюме": "Пт1"},
{"день": 6, "резюме": "Sat1"}]
Я хочу сгенерировать html-таблицу на основе этих данных таким образом, чтобы она отображалась, как показано ниже..










День1 День2 День 3 День 4 День 5 День6

выход:

----------------------------------------------
День1 |День2 День3 День4 День5 День6
-----------------------------------------------
proge1 Tue1 Wed1 Thur1 Fri1 сайт SAT1

proge2 Tue2 Wed2 Thur2
proge3 Tue3 Wed3

Что я уже пробовал:

вот что я сделал....


скрипт

$(функция () {
var json = [];
var tr, start=0;
консоли.журнала (здесь формате JSON проверить здесь,в формате JSON);
for (var i = 0; i < json.длина; i++) {
tr = $(");
tr. append("" + json[i]. summary + "");
$('таблица').добавить(тр);
}
}},


Но я думаю, как вызвать эту функцию для каждого td.... скажем ... назначить некоторое значение для каждого td, например 1,2,3,4, и передать это значение функции и получить необходимые данные для каждого td.... эксперты... Я новичок в html пожалуйста посоветуйте если у вас есть какие либо идеи

2 Ответов

Рейтинг:
2

Ashwin. Shetty

Чтобы упростить генерацию HTML-кода, вам придется преобразовать свой массив в другую группировку, я бы предложил преобразовать данные в массив на основе Дня, что-то вроде

[{"день":1, резюме: ["проге1", "проге2", " проге3"],
{"день": 2, "резюме": ["Tues1", "Tues2", " Tues3"],
{"день": 3, "резюме": ["Wed1", "Wed2", " Wed3 "],
{"день": 4, "резюме": ["Thur1", " Thur2"],
{"день":5, "резюме": ["Пт1"],
{"день": 6, "резюме": ["Sat1"]}]

Как только вы преобразуете это, получите максимальную длину массива из сводного массива за весь день. В приведенном выше случае это будет 3. Положите петлю поверх максимальной длины, которую вы получите, внутреннюю петлю на нет дней. Перед добавлением данных из записи дня проверьте, есть ли в указателе дня массива данные для этого индекса.

Рейтинг:
16

Karthik_Mahalingam

попробовать это 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.js"></script>

    <script>
        var array = [{ "day": 1, "summary": "proge1" },
{ "day": 1, "summary": "proge2" },
{ "day": 1, "summary": "proge3" },
{ "day": 2, "summary": "Tues1" },
{ "day": 2, "summary": "Tues2" },
{ "day": 2, "summary": "Tues3" },
{ "day": 3, "summary": "Wed1" },
{ "day": 3, "summary": "Wed2" },
{ "day": 3, "summary": "Wed3 " },
{ "day": 4, "summary": "Thur1" },
{ "day": 4, "summary": "Thur2" },
{ "day": 5, "summary": "Fri1" },
{ "day": 6, "summary": "Sat1" }];

        $(function () {
            var temp = array;
            var uniqdays = [];
            for (var i = 0; i < array.length; i++)  
                if (uniqdays.indexOf(array[i].day) == -1) uniqdays.push(array[i].day);
            var maxAry = [];
            for (var i = 0; i < uniqdays.length; i++) {
                var tempary = [];
                for (var j = 0; j < array.length; j++) {
                    if(array[j].day == uniqdays[i])
                        tempary.push(array[j].summary)
                }
                maxAry.push(tempary.length);
            }           
            var maxValue = maxAry.sort().pop();

            var $tbl = $('#tbl');
            var $trhead = $('<tr>').appendTo($tbl);
            for (var i = 0; i < uniqdays.length; i++) {
                var day = uniqdays[i]; 
                var $td = $('<td>').appendTo($trhead);
                $td.text('day' + day); 
            }
           
            for (var i = 0; i < maxValue; i++) {
                var $tr = $('<tr>').appendTo($tbl);
                for (var j = 0; j < uniqdays.length; j++) {
                    var day = uniqdays[j];

                    for (var k = 0; k < temp.length; k++) {
                        if (temp[k].day == day && temp[k].summary != '') {
                            var $td = $('<td>').appendTo($tr);
                            $td.text(temp[k].summary);
                            temp[k].summary = '';
                            break;
                        }
                    }
                }
            }
        });

    </script>
</head>
<body>
    <table cellspacing="1" cellpadding="1" border="1" id="tbl">        
    </table>

</body>
</html>


Демонстрация: JSFiddle[^]

Member 12974741

вы дорогие!! Спасибо за это, Картик....Я пытаюсь улучшить код с помощью реальных данных... но когда я выполняю его, он показывает некоторые неправильные o / p... Я думаю, что он основан на переданном значении td....??? пожалуйста, предложите это..

Для получения дополнительной информации:
вот реальные данные массива :
Реальный массив : https://gist.github.com/mahakT/df9632be8b8929197041460efd335ac8
get : последовательность данных, основанная на времени
Отобразить в виде таблицы: эта ссылка показывает данные согласно Кодексу, предложенные вами.....протокол HTTPS://firstappth.mybluemix.объем/ ( но если вы вид.. колонна 1 имеет извлечена Колум 6 данных, а также.... не уверен, что Бек тд?)

Это ожидаемый результат в таблице....

Понедельник / Вторник / Среда.....
-----------------------------------
Резюме / Резюме | Резюме
4.00-4.45| 4.00-4.45 |4.00-4.45
---------------------------------
Резюме / Резюме |Резюме
4.45-5.30 | 4.00-4.45 |4.00-4.45



таблица должна показывать точные данные в виде событий ics(вы можете просмотреть ics в календаре, чтобы увидеть, как именно должны выглядеть выходные данные)... Массив содержит данные из этой ИС....

https://calendar.google.com/calendar/ical/o8mfhn5drq7t875vosh3b5kdao%40group.calendar.google.com/public/basic.ics


Я был бы признателен, если бы вы могли предоставить свои предложения/мысли...Спасибо!!

Karthik_Mahalingam

не могли бы вы опубликовать ожидаемый результат в виде скриншота

Member 12974741

пожалуйста, просмотрите этот URL в IE.....протокол HTTPS://firstappth.mybluemix.чистая/

Я использовал приведенный выше код... и просто обновил свой массив, и вы можете увидеть вывод в приведенном выше url-адресе.... Я что-то упустил?

Karthik_Mahalingam

url-адрес не отвечает

Member 12974741

Привет.... Как отправить скриншот ... так как я не мог вставить его в раздел вопросов/комментариев...

Member 12974741

Я ничего не сделал... Просто добавил еще одну запись в массив к заданному коду abive ... вы можете увидеть результат.... просто делюсь подробностями для вашей справки..... var array = [{"day": 1, "summary": "proge1" },
{"день": 1, "резюме": "проге2" },
{"день": 1, "резюме": "проге3" },
{ "день": 2, "резюме": "вторник 1" },
{ "день": 2, "резюме": "вторник 2" },
{ "день": 2, "резюме": "вторник 3" },
{"день": 3, "резюме": "Wed1" },
{"день": 3, "резюме": "Wed2" },
{"день": 3, "резюме": "Wed3 " },
{ "день": 4, "резюме": "Thur1" },
{ "день": 4, "резюме": "Thur2" },
{"день": 5, "резюме": "Пт1" },
{"день": 6, "резюме": "Sat1" },
{"день": 6, "резюме": "Sat1" }];

$(функция () {
var temp = массив;
ВАР uniqdays = [];
for (var i = 0; i & lt; array. length; i++)
если (uniqdays.метод indexOf(массив[я].день) == -1) uniqdays.толчок(массив[я].день);
ВАР maxAry = [];
for (var i = 0; i < uniqdays.длина; i++) {
ВАР tempary = [];
for (var j = 0; j & lt; array. length; j++) {
if (array[j]. day == uniqdays[i])
tempary.толчок(массив[Дж].резюме)
}
maxAry.толчок(tempary.длина);
}
ВАР параметр maxvalue = maxAry.сортировать().поп();

var $tbl = $('#tbl');
var $trhead = $("). appendTo($tbl);
for (var i = 0; i < uniqdays.длина; i++) {
var day = uniqdays[i];
var $td = $("). appendTo($trhead);
$тд.текст ("день" + день);
}

for (var i = 0; i < maxValue; i++) {
var $tr = $("). appendTo($tbl);
для (var j = 0; j < uniqdays.длина; j++) {
var day = uniqdays[j];

для (var k = 0; k & lt; temp. length; k++) {
если (температура[к].день == день &ампер;&ампер; температура[к].резюме != ") {
var $td = $("). appendTo($tr);
$тд.текст(темп[к].резюме);
температура[к].резюме = ";
перерыв;
}
}
}
}
});

Karthik_Mahalingam

Только сейчас проснулся.. Я обновлю его через некоторое время.

- отправлено с мобильного телефона

Member 12974741

Привет.... Как отправить скриншот ... так как я не мог вставить его в раздел вопросов/комментариев...

Karthik_Mahalingam

сделайте скриншот и опубликуйте url-адрес
https://snag.gy/

Karthik_Mahalingam

попробовать это
$(функция () {
var temp = массив;
ВАР uniqdays = [];
for (var i = 0; i & lt; array. length; i++)
if (uniqdays. indexOf(array[i]. seq) == -1)
if (array[i]. seq != null)
uniqdays.толчок(массив[я].далее);
ВАР maxAry = [];
for (var i = 0; i < uniqdays.длина; i++) {
ВАР tempary = [];
for (var j = 0; j & lt; array. length; j++) {
if (array[j]. seq == uniqdays[i])
tempary.толчок(массив[Дж].резюме)
}
maxAry.толчок(tempary.длина);
}
ВАР параметр maxvalue = maxAry.сортировать().поп();

var $tbl = $('#tbl');
var $trhead = $("). appendTo($tbl);
for (var i = 0; i < uniqdays.длина; i++) {
var seq = uniqdays[i];
var day =";
for (var j = 0; j & lt; array. length; j++) {
если(массив[Дж].далее == сл){ день = массив[Дж].день;перерыв }
}
var $td = $("). appendTo($trhead);
$td. text( день);
}
отладчик

for (var i = 0; i < maxValue; i++) {
var $tr = $("). appendTo($tbl);
для (var j = 0; j < uniqdays.длина; j++) {
var seq = uniqdays[j];

для (var k = 0; k & lt; temp. length; k++) {
если (температура[к].далее == далее &ампер;&ампер; температура[к].резюме != ") {
var $td = $("). appendTo($tr);
//$td.html(температура[к].резюме + '' + температура[к].начать);
$td.html ('summary' + " + temp[k]. start);
температура[к].резюме = ";
перерыв;
}
}
}
}



});

Member 12974741

Массив :https://gist.github.com/mahakT/df9632be8b8929197041460efd335ac8
1. (мы можем игнорировать поле "seq", если это не требуется)
2. мне нужно отсортировать массив... и данные должны быть извлечены на основе последовательности дат начала и окончания ... для вашего лучшего понимания я уступил screenshot...https://snag.gy/wsjgTb.jpg

3. ожидаемый вывод в табличном формате из массива :https://snag.gy/S7YZD9.jpg

Пожалуйста, дайте мне знать, если вам понадобятся еще какие-нибудь подробности..... Спасибо

Karthik_Mahalingam

проверьте приведенный выше код и измените его в соответствии с вашими потребностями.

Member 12974741

Спасибо, Картик.... Я все еще вижу тот же вывод :( с приведенным выше кодом...просто запустите этот код... Колонка понедельника также извлекает записи вторника/субботы :(

https://gist.github.com/mahakT/7d62541a633f1e1464a4fa7e5ed4a5aa

Karthik_Mahalingam

Я ничего не сделал для сортировки..

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

Member 12974741

хорошо, Спасибо за это !!

Member 12974741

Эй, Картик... Я пытался изменить ваш code....as я нахожусь в стадии запуска..Я не мог отлаживать или продолжать дальше...

Я действительно пробовал по-другому...но я застрял, как добавить данные на основе условия..не могли бы вы, пожалуйста, любезно проверить и посмотреть, можете ли вы дать мне какое-либо предложение?? Очень ценю вашу помощь!!

http://jsfiddle.net/Thea123/x8uvxxjx/

Karthik_Mahalingam

у этой скрипки есть diff-код..
пингуйте меня, когда будете в сети.

Member 12974741

Привет Картик.... да его другой код я пробовал...но он извлекает данные только в coln1.

вот код....протокол HTTPS://jsfiddle.объем/Thea123/oeevhh30/

К моему understanding....it передает массив[i] в цикл, и если запись должна быть помещена в 3-ю строку в coln 3 ... вместо этого ... она проверяет порядок coln1,coln2, coln3... и если строка coln1 row3 пуста, она передает данные в coln1 вместо coln3.....

Karthik_Mahalingam

У вас есть team viewer

Member 12974741

У меня есть webex... это сработает?

Karthik_Mahalingam

.

Member 12974741

ладно, конечно...!!

Karthik_Mahalingam

правильно это или нет
https://jsfiddle.net/Thea123/oeevhh30/

Member 12974741

если вы видите выходные данные, данные wed3 должны находиться под заголовком column3 (заголовок day3), а sat1 - под заголовком day 6... Если вы видите результаты, это работает по-другому....
В идеале," день": 1, --> Данные должны идти под заголовком day1...
"день": 2 -- заголовок "день2"....

Member 12974741

Надеюсь, вы поняли, что я имею в виду, и не перепутали.. :)

Karthik_Mahalingam

хмм

Karthik_Mahalingam

теперь понял.

Karthik_Mahalingam

проверьте эту скрипку
https://jsfiddle.net/karthikjsf/oeevhh30/6/

Member 12974741

Потрясающий.... ты потрясающая...!! Эта работа.. Огромное спасибо за вашу помощь...

Karthik_Mahalingam

добро пожаловать :)

Karthik_Mahalingam

Тамил, а?

Karthik_Mahalingam

ладно, я тоже.

Member 12974741

о, ладно...БДБ, как ты догадался, что я могу быть тамилианкой...(думая, гг)

Karthik_Mahalingam

ору тамилануку таан Адху териюм.

Member 12974741

(Надеюсь без сарказма:\) и магижчи:):) опять..Спасибо....ты мастер в программировании !!

Karthik_Mahalingam

:) унга почте paathen, Касир ну poturnchu, так Тамил ну думаю, могут.

Member 12974741

Оооо хорошо хорошо :)

Karthik_Mahalingam

:)

Member 12974741

Нет.А я-нет....

Karthik_Mahalingam

хорошо я буду ЧК