Question

我从我的数据库中检索了用户列表，现在我想将它们添加到我的页面中。我试图使用表格显示用户，并确保它们每行出现四个，然后跳转到新行，但我不知道如何做到这一点。到目前为止，这是我的js文件。如果您还有其他需要，请告诉我。

var space = new Array("username", "user_id","address","state","postal_code","phone","email");
$(document).ready( function() {
var obj = '';
$.getJSON( "obtainUsers.php", function(data) {

        var num = 1;
                    var json = JSON.stringify(data);                                   

                    obj = jQuery.parseJSON(json);


                    var html = "";
                    var tot_obj = obj.length ;
                    var upper = (num*10)-1;
                    var lower = (num*10)-10;
                    var max = ( upper < tot_obj ) ? upper : tot_obj ;

                    html += "<div><table width:'100%'><tr>";                        
                    for (var i = lower; i <= max-1 ; i++ )
                    {       
                            var toggle = i % 2;
                            var list_items = "";

                            columns.forEach( function(col) 
                            { 
                                if ( obj[i][col] != null ) {
                                    if ( obj[i][col] !== "" ) 
                                    {
                                        if ( obj[i].level == 'NEW' ) {
                                            list_items += "<div class='new_client'>";
                                            list_items += obj[i][col]  + "</div >";
                                        }                                            
                                        else if( obj[i].level == 'RENEWAL' ) {
                                            list_items += "<div class='renewing_client'>";
                                            list_items += obj[i][col]  + "</div >";
                                        }
                                        else if( obj[i].level == 'CURRENT' ) {
                                            list_items += "<div class='current_client';>";
                                            list_items += obj[i][col]  + "</div >";
                                            //console.log(obj[i][col]);
                                        }
                                    }
                                }  
                            } );
                            list_items += "</br >";


                            if ( toggle == 0 )
                            {
                                html += "<td><div class='table_styles'> ";
                                html += list_items ;
                                //console.log(list_items);
                                html += "</div></td>";
                                console.log(html);
                            }
                            else
                            {
                                html += "<td><div class='table_styles'> ";
                                html += list_items;
                                html += "</div></td>";
                            }
                    }
                    html += "</tr> </table></div>";
                    $('.runninglist').html(html);
            });
});

Answer 1

var columns = ["username","user_id","address","state","postal_code","phone","email"];

var level_classes = {"NEW":"new_client", "RENEWAL":"renewing_client", "CURRENT":"current_client"};

$(document).ready( function() {
    $.getJSON("obtainUsers.php", function(data) {
        var $table = $('<table style="width: 100%;">');
        var $tbody = $('<tbody>');
        $table.append($tbody);
        var $tr = null;

        data.forEach(function(user, index){
            if(index % 4 === 0) {
                $tr = $('<tr>');
                $tbody.append($tr);
            }
            $td = $('<td class="'+level_classes[user.level]+'">');
            columns.forEach(function(col){
                $td.append(user[col]);
                $td.append($('<br>'));
            });
            $tr.append($td);
        });
        $('.runninglist').append($table);
    });
});

关闭并在每四个元素后创建一个标记。它是一个循环吗？

1 个答案: