Question

我正在尝试使用jQuery.ajax（）显示表数据。一切似乎都运行正常，但我想要一个输出，每个表行显示3个表数据。我有五个数据，即A，B，C，D，E。我想要的输出应该是这样的：

$.ajax({
    type: 'get',
    url: 'php/init.php?display-images',
    dataType: 'json',
    success: function(data){
        var max_rows = 3;
        var row_counter = 0;
        $('#tbl-mydesigns').append('<tr>');
        $.each(data, function(index, item){
            while(row_counter < max_rows){
                $('#tbl-mydesigns tr').append('<td>'+item.imagename+'</td>');
                row_counter++;
            }
        });
    }
});

这是我的代码：

A A A

然而，它给了我这个输出：

   foreach (var columnIndex in columnsToRemove.OrderByDescending(x => x)
   {
        gridViewToExport.Columns.RemoveAt(columnIndex); 
   }

提前致谢！

Answer 1

您需要重新组织，因为项目变量在您的while循环中未更改，因此它当然会显示相同的A值。由于您没有将计数器重置为零，因此不会开始打印新列。

<script>
       // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { 
                    video: {
                        mandatory: {
                            minWidth: 1280,
                            minHeight: 720,
                            /*Added by Chad*/
                            maxWidth: 1280,
                            maxHeight: 720
                        }
                    }
                },
                errBack = function(error) {
                    console.log("Video capture error: ", error.code); 
                };

            // Put video listeners into place
            if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            /*
                video : video source tag
                320,0 : the shift coords
                320,180 : the canvas size
                0,0 : no shift in the canvas
                640,360 : important ! it’s the native resolution of video source
            */
            context.scale(3.8,3.8);

            function loop(){
               context.drawImage(video, 450, 0, 1080, 1920, 0, 0, 720, 1280);
               setTimeout(loop, 1000 / 30);
            }

            loop();


        }, false);
</script> 


    <video id="video" height="1080" width="1920" autoplay></video>
    <canvas id="canvas" height="1920" width="1080"></canvas>


// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { 
            video: {
                mandatory: {
                    minWidth: 1280,
                    minHeight: 720,
                    /*Added by Chad*/
                    maxWidth: 1280,
                    maxHeight: 720
                }
            }
        },
        errBack = function(error) {
            console.log("Video capture error: ", error.code); 
        };

    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    /*
        video : video source tag
        320,0 : the shift coords
        320,180 : the canvas size
        0,0 : no shift in the canvas
        640,360 : important ! it’s the native resolution of video source
    */




    context.scale(-3.8,3.8);
    context.translate(-720,0);
    function loop(){
       context.drawImage(video, 450, 0, 1080, 1920, 0, 0, 720, 1280);
       setTimeout(loop, 1000 / 30);
    }

    loop();


}, false);

Answer 2

你在另一个周期内循环。并且您必须在3个数据之后附加新的tr。试试这个：

$.ajax({
   type: 'get',
   url: 'php/init.php?display-images',
   dataType: 'json',
   success: function(data){
      var max_cols = 3;
      $('#tbl-mydesigns').append('<tr></tr>');
      for (i = 0; i < data.length; i++) { 
         $('#tbl-mydesigns tr:last').append('<td>'+data[i].imagename+'</td>');
         if((i+1) % max_col == 0){
            $('#tbl-mydesigns').append('<tr></tr>');
         }
      }
      for(;i % max_col != 0;i++){
         $('#tbl-mydesigns tr:last').append('<td></td>');
      }
   }
});

jQuery.each（）限制每行的表数据数

2 个答案: