Single column data is displayed in a table

ask God, the effect shown in figure 3 at the front end, the number of data in the background is random, there may be up to 80 items, and there is also the ability to submit data. How to write the code?

Javascript php
Mar.22,2021

take a brief look at the problem, the desired effect is to put the four records of the database into table.
then you must be able to get the list of these four records, if it is List < T > list.
below, pass the list to the foreground, and then loop through it. 

var html = '<tr>';
for(var i = 0,i<list.length;iPP)
{
    html += '<td>"list[i].zi"</td>';
}
html += '</tr>';
The key to the question of

is how many rows and columns there are. So, just figure out how many tr and td there are.

var trs ='< tr >'; 

    for(var i=0;i<80;iPP){
        if(i==9 || i==19 || i==29 || i==39 || i==49 || i==59 || i==69){
            if(i<d.mxs.length){
                trs += '<td style="padding: 0px;"><input type="text" name="data['+i+'][zl]" value="'+d.mxs[i]['zl']+'" class="layui-input" autocomplete="off"></td></tr><tr>';
            }else{
                trs += '<td style="padding: 0px;"><input type="text" name="data['+i+'][zl]" class="layui-input" autocomplete="off"></td></tr><tr>';
            }          
        }else{
            if(i<d.mxs.length){
                trs += '<td style="padding: 0px;"><input type="text" name="data['+i+'][zl]" value="'+d.mxs[i]['zl']+'" class="layui-input" autocomplete="off"></td>';
            }else{
               trs += '<td style="padding: 0px;"><input type="text" name="data['+i+'][zl]]" class="layui-input" autocomplete="off"></td>'; 
            }
            
        }
                   
    }
    trs += '</tr>';$('-sharpgoodsKc-form-table tbody').append(trs);

d.mxs is the data returned by the background

Previous: Yum source replacement

Next: How to dynamically change the components imported by import in vue

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu