-1

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.

enter image description here

The logic given to me is shown in below. enter image description here

6
  • What you have tried so far? Please post code .... Jun 17, 2017 at 7:32
  • I don't know how to write code.
    – Thet Han
    Jun 17, 2017 at 7:33
  • I want to write with html and jquery, but don't know how to implement it, please \/_\/
    – Thet Han
    Jun 17, 2017 at 7:35
  • click on edit, search for {}, this option above the editor, paste your code Jun 17, 2017 at 7:36
  • please suggest me how to write this with jquery
    – Thet Han
    Jun 17, 2017 at 7:48

1 Answer 1

0
<!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>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.