Jquery dynamic table data append bottom and right with json

Question

Jquery dynamic table data append bottom and right with json

104 views Asked by Thet Han At 17 June 2017 at 07:29

I am troubled with this exercise, I have json data

e.g {1,5,6,0,2,3,4,5,8,9,7,1}

I am trying to do a “dynamic table” with only two kinds of label “ below 5” and “over 5”, if the data is in the range of 1-4 then display “ below 5” and if the data is greather than or equal 5 then display “over 5” I am Trying to display like this way with Html and Jquery but I don't know how to implement it.

The logic given to me is shown in below.

Original Q&A

There are 1 answers

**Thet Han** · Answer 1 · 2017-06-19T05:39:51+00:00

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid black;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    json_data = '[1,5,6,0,2,3,4,5,8,9,7,1]';
    json_arr = $.parseJSON(json_data);
    small = ['1','2','3','4'];
    value_old = old = '';
    value_current = current ='';
    tr_count =1;
    td_count =0;
    vertical_pointer= 0;//to pass throught vertical
    horizontal_pointer= 0;//to pass throught horizontal
    $.each(json_arr, function(index, val) {
        value_current =val;
        if (value_current<5) {
            show_value = 'Below 5';
        }
        else{
            show_value = 'Over 5';
        }
        current= show_value;
        old_and_current = "old is"+old+"("+value_old+") and current is "+current+"("+value_current+")";
        table = $('table');
        if (index=='0' || current!=old) {
            if (tr_count>1) {
                table.find('tr:first').append('<td>'+show_value+'</td>');
                for (i = 1; i < tr_count; i++) {
                    table.find('tr:eq('+i+')').append('<td></td>');
                }
            }
            else{
                table.find('tr:first').append('<td>'+show_value+'</td>');
            }
            td_count +=1;
            horizontal_pointer=td_count;
            vertical_pointer=0;
        }
        else {
            total_td =td_count-1;
            if (tr_count <=2) {
                previous_tr = tr_count-1;
             }
             else{
                     for (i = 0; i < tr_count; i++) {
                        vacancey_tr_td = table.find('tr:eq('+i+')').children('td:eq('+total_td+')').text();
                        if (vacancey_tr_td) {
                            continue;
                        }
                        else{
                            previous_tr = i;
                            break;
                        }
                }
             }
             if (previous_tr == tr_count-1) {
                toadd = true;
             }
             else{
                toadd= false;
             }
            last_tr = table.find('tr:eq('+previous_tr+')');// get previous tr
            html_front_td='';
            for (i = 0; i <total_td; i++) {// then paste the empty td value before the last td;
                html_front_td += '<td></td>';
            }
            if (vertical_pointer == 0 ) {
                if (tr_count>1) {
                    table.find('tr:eq('+previous_tr+')').children('td:eq('+total_td+')').text(show_value);
                    if (toadd ===true) {
                        last_tr.after('<tr>'+html_front_td+'<td></td></tr>');
                        tr_count+=1;
                    }
                }
                else {
                    last_tr.after('<tr>'+html_front_td+'<td>'+show_value+'</td></tr>');
                    tr_count+=1;
                }
            }
            else {
                table.find('tr:eq('+previous_tr+')').children('td:eq('+total_td+')').text(show_value);
                if (toadd ===true) {
                    last_tr.after('<tr>'+html_front_td+'<td></td></tr>');
                    tr_count+=1;
                }
            }
            vertical_pointer= tr_count;
        }
        old = current;
        value_old = value_current;
    });
    $('table tr:last').remove();
});
</script>
</head>
<body>
<table><tr></tr></table>
</body>
</html>

TechQA.

Jquery dynamic table data append bottom and right with json

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in JQUERY-UI

Related Questions in JQUERY-TOOLS

Popular Questions

Popular Tags

Trending Questions