Jquery动态表数据在底部和右侧附加json答案

【问题标题】：Jquery dynamic table data append bottom and right with jsonJquery动态表数据在底部和右侧附加json
【发布时间】：2017-11-19 23:32:53
【问题描述】：

我对这个练习感到困扰，我有json数据

例如 {1,5,6,0,2,3,4,5,8,9,7,1}

我正在尝试做一个“动态表格”，只有两种标签“低于5”和“超过5”，如果数据在1-4范围内，则显示“below 5”，如果数据大于等于5，则显示“超过 5 个” 我正在尝试使用 Html 和 Jquery 以这种方式显示，但我不知道如何实现它。

给我的逻辑如下所示。

【问题讨论】：

到目前为止您尝试过什么？请张贴代码....
我不会写代码。
想用html和jquery写，但是不知道怎么实现，请\/_\/
点击编辑，搜索{}，编辑器上方这个选项，粘贴你的代码
请建议我如何用 jquery 写这个

标签： javascript jquery twitter-bootstrap jquery-ui jquery-tools

【解决方案1】：

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

【讨论】：