How to implement this kind of table in js?

as shown in the figure, a total of 3 columns, each column fixed 22 rows, more than 22 rows, then shown on the right, the ranking changes with the previous, is there any good way to solve it?

Apr.23,2021

three columns are a table with 22 rows, create multiple tables, float
data to the left and put them in the data, and get the tr, traversal tr, fill data of all tables.
maintains an index value and traverses index + = 1.


Link description

modify the value of tableCols to 22 to meet your requirements;


A table and a set of js codes solve

var hang =0;
        var gap = 0;
        for (var i = 0; i < data.length; iPP) {
            var rank = $('tbody').children('tr')[hang].children('td')[0 + gap];//td
            var hospitalName = $('tbody').children('tr')[hang].children('td')[1 + gap];//td
            var price = $('tbody').children('tr')[hang].children('td')[2 + gap];//td
            rank.text(i+1);
            hospitalName.text(data[i]['hospitalName']);
            price.text(data[i]['price']);
            hangPP;
            if(hang>21){//22td30;
               hang = 0;
               gap = gap + 3;
            } 
        }
Menu