Question

我正在追加表格，我希望它只能在一张桌子上显示4个信任，我希望能够像一个carousal一样向左或向右滚动表格。

有没有人有关于如何做到这一点的任何建议？（请不要额外插件）

我想要的例子如何：

Slide / Page1 - Trust 1，Trust 2，Trust 3，Trust 4
Slide / Page2 - Trust 5，Trust 6，Trust 7，Trust 8
Slide / Page3 - Trust 9，Trust 10，Trust 11，Trust 12

我的代码：

    var trustIDCount = '';
    var trustData = '[{"trustName":"University Hospitals of Morecambe Bay"},' +
                 '{"trustName":"Taunton and Musgrove"},'+
                 '{"trustName":"St Georges Healthcare"},'+
                 '{"trustName":"The Rotherham"},'+
                 '{"trustName":"City Hospitals Sunderland"},'+
                 '{"trustName":"Bradford District Care Trust"},'+
                 '{"trustName":"Cental Manchester Foundation Trust"},'+
                 '{"trustName":"Kingston Hospital"},'+
                 '{"trustName":"Nottingham University Hospital"},'+
                 '{"trustName":"Nottingham Health Informatics"},'+
                 '{"trustName":"Tameside Hospital"},'+
                 '{"trustName":"Your Healthcare"},'+
                 '{"trustName":"Hull and East Yorkshire"},'+
                 '{"trustName":"Doncaster and Bassettlaw"},'+
                 '{"trustName":"Wigan Wrightington and Leigh"},'+
                 '{"trustName":"Barnsley Hospital NHS Foundation Trust"},'+
                 '{"trustName":"Cornwall Partnership NHS Foundation Trust"},'+
                 '{"trustName":"Birmingham Childrens"},'+
                 '{"trustName":"Pennine Acute Hospital Trust"},'+
                 '{"trustName":"CarePlus Grp"},'+
                 '{"trustName":"Imperial College Healthcare NHS Trust"},'+
                 '{"trustName":"Cumbria CCG"},'+
                 '{"trustName":"Poole Borough Council"},'+
                 '{"trustName":"InHealth"},'+
                 '{"trustName":"Bridgewater Community Healthcare NHS Foundation Trust"},'+
                 '{"trustName":"University Hospitals Coventry and Warwickshire NHS Trust"},'+
                 '{"trustName":"Royal London Borough of Greenwich"},'+
                 '{"trustName":"Urgent Care 24"}]';

    var trHTML = '';

    $.each(JSON.parse(trustData), function (i, item) 
    {
        trustIDCount++;
        trHTML += '<tr id=' + trustIDCount + ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>';
    });
    $('#trustTable').find("tbody").html(trHTML);

#trustTable
{
  width: 100%;
}

.trClass 
{
    direction:rtl;
    float:left;
    width: 20%;
    margin-left: 5%;
}

.imageWrapper
{
    height: 30px;    
    width: 75px;
    float: right;
    margin-bottom: 5px;
    clear:both;
    border: 1px solid red;
}

.textWrapper
{
    height: 75px;
    font-size: 14px;
    font-weight: bold;
    clear:both;
    text-align: right;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="trustTable">
  <tbody>

  </tbody>
</table>

Answer 1

如果我理解正确，您希望每页有4个这样的信任。以及导航到下一页或上一页的方法。

这意味着您需要记住当前页码以及根据用户的导航选择增加或减少该值的机制。根据当前页面值，您需要使用每页仅4个信任来装饰页面（除非在最后一页，信任可能少于4个，具体取决于信任总数）。

这是a fiddle给你一个想法：和玩。

function previous(){
    if (currentPage>0){
        currentPage --;
        showTable();
    }
}

function next(){
    if (currentPage<Math.floor(htmlArray.length/4) - 1){
        currentPage ++;
        showTable();
    }
}

function showTable(){
    var trHTML = '';
    for (var i=0; i<4; i++){
       trHTML = trHTML + htmlArray[currentPage * 4 + i];
    }
    $('#trustTable').find("tbody").html(trHTML);

}

...

    var htmlArray = new Array();

var currentPage = 0;
    $.each(JSON.parse(trustData), function (i, item) 
    {
        trustIDCount++;
//        trHTML += '<tr id=' + trustIDCount + ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>';
        htmlArray.push('<tr id=' + trustIDCount + 
                       ' class="trClass"><td>' + '<div class="imageWrapper"></div>' + '<div class="textWrapper">' + item.trustName + '</div>' + '</td>');
    });
   // $('#trustTable').find("tbody").html(trHTML);

$("#prev").click(previous);
$("#next").click(function(){next();});

showTable();

<强> __ UPDATE __

function next(){
    if (currentPage<Math.floor(htmlArray.length/4) - 1){
        currentPage ++;
    } else {
        currentPage = 0;
    }
    showTable();
}

拆分附表（JQuery或JavaScript）

1 个答案: