怎么设置表格整体能换换到下一行?

clipboard.png

要怎么设置才能才能使得表格后面三列能换换到下一行?
变成这样的效果:

clipboard.png

clipboard.png
clipboard.png

回复
阅读 3.4k
3 个回答

不清楚外部的细节和变量,无法调试。大概率会有报错,你自己调下

思路就是下面这样的,用一个循环判断数量,每次只渲染一定数量的列。

add是渲染函数,循环在while里面

var length;
var group;
var num;

function add(start, end) {

  var tableDiv = $("<table class='table table-bordered syyy_table syyy_Table text-center'></table>");
  var tableHead = $('<tr><td class="col-xs-2" style="border:0px;"></td></tr>');
  var firstLine = $('<tr><td class="col-xs-2" style="border:0px;">上午</td></tr>');
  var secondLine = $('<tr><td class="col-xs-2" style="border:0px;">下午</td></tr>');
  var thirdLine = $('<tr><td class="col-xs-2" style="border:0px;">晚上</td></tr>');

  //console.log(parseInt(frequentlyUsedEquipmentList[i].equipmentOpenTimes.length/4+1));
  //var tableNumber=parseInt(frequentlyUsedEquipmentList[i].equipmentOpenTimes.length/4+1);
  for (var j = start; j < end; j++) {
    var equipmentOpenTimeId = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].id;
    var day = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].dayDescription;
    var week = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].dayOfWeekDescription;
    var am = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amStateDescription;
    var pm = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmStateDescription;
    var night = frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightStateDescription;

    var tdWeek = $("<td style='border:0px;' id='" + frequentlyUsedEquipment.id + equipmentOpenTimeId + "'>" + day + "<br>" + week + "</td>");

    var tdAm = $('<td class="am0 btnStyle">' + am + '</td>');
    if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState == "1") {
      tdAm.addClass("danger");
      tdAm.css("background-color", "#f391a9");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState == "0") {
      tdAm.addClass("info");
      tdAm.css('background-color', "#5CB0D4");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState == "-1") {
      tdAm.addClass("active");
      tdAm.css("background-color", "#74787c");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState == "2") {
      tdAm.addClass("warning");
      tdAm.css("background-color", "#FFDEAD");
    }

    var tdPm = $('<td class="pm1 btnStyle">' + pm + '</td>');
    if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState == "1") {
      tdPm.addClass("danger");
      tdPm.css("background-color", "#f391a9");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState == "0") {
      tdPm.addClass("info");
      tdPm.css('background-color', "#5CB0D4");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState == "-1") {
      tdPm.addClass("active");
      tdPm.css("background-color", "#74787c");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState == "2") {
      tdPm.addClass("warning");
      tdPm.css("background-color", "#FFDEAD");
    }

    var tdNight = $('<td class="ni2 btnStyle">' + night + '</td>');
    if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState == "1") {
      tdNight.addClass("danger");
      tdNight.css("background-color", "#f391a9");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState == "0") {
      tdNight.addClass("info");
      tdNight.css('background-color', "#5CB0D4");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState == "-1") {
      tdNight.addClass("active");
      tdNight.css("background-color", "#74787c");
    } else if (frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState == "2") {
      tdNight.addClass("warning");
      tdNight.css("background-color", "#FFDEAD");
    }

    tableHead.append(tdWeek);
    firstLine.append(tdAm);
    secondLine.append(tdPm);
    thirdLine.append(tdNight);
    tableDiv.append(tableHead);
    tableDiv.append(firstLine);
    tableDiv.append(secondLine);
    tableDiv.append(thirdLine);

  }
  frequentlyUsedEquipmentDivBottom.append(tableDiv);

}


for (var i = 0; i < frequentlyUsedEquipmentList.length; i++) {
  frequentlyUsedEquipment.equipmentName = frequentlyUsedEquipmentList[i].equipmentName;
  frequentlyUsedEquipment.introduction = frequentlyUsedEquipmentList[i].introduction;
  frequentlyUsedEquipment.billingMethodDescription = frequentlyUsedEquipmentList[i].billingMethodDescription;
  frequentlyUsedEquipment.id = frequentlyUsedEquipmentList[i].id;
  frequentlyUsedEquipment.equipmentOpenTimes = frequentlyUsedEquipmentList[i].equipmentOpenTimes;

  var frequentlyUsedEquipmentDiv = $("<div class='cysb_sub'></div>");
  var frequentlyUsedEquipmentDivTop = $("<div id='" + frequentlyUsedEquipment.id + "frequentlyUsedEquipment' class='row'><div class='col-md-12'><div class='col-md-4 col-xs-4 text-center'><img src='https://www.towide.cn:444/organization_" + JSON.parse(localStorage.getItem("user")).organizationId + "/department_" + localStorage.departmentid + "/equipment_images/" + frequentlyUsedEquipment.id + ".jpg'></div><div class='cysb_sub_left col-md-8 col-xs-8'><h3>" + frequentlyUsedEquipment.equipmentName + "</h3><h4>" + frequentlyUsedEquipment.introduction + "</h4><span>" + frequentlyUsedEquipment.billingMethodDescription + "</span>&nbsp;&nbsp;<span>单价:10元/" + frequentlyUsedEquipment.billingMethodDescription[1] + "</span></div></div></div>");
  var frequentlyUsedEquipmentDivBottom = $("<div class='row'></div>");\


  length = frequentlyUsedEquipmentList[i].equipmentOpenTimes.length;
  group = 0; // 计数
  num = 5; // 自己设置,每行多少列
  
  /**
   * 根据列数渲染表格
   */

  while (group * num <= length) {
    // 调用添加函数渲染表格
    add(group * num, group * (num + 1) > length ? length : group * (num + 1));
    group++;
  }
  
  // 渲染end

  frequentlyUsedEquipmentDivTop.on("click", function() {
    localStorage.equipmentid = this.id[0];
    location.href = "ExperimentReservation_xq.html";
  });

  frequentlyUsedEquipmentDiv.append(frequentlyUsedEquipmentDivTop);
  frequentlyUsedEquipmentDiv.append(frequentlyUsedEquipmentDivBottom);
  $("#syyy_cysb").append(frequentlyUsedEquipmentDiv);

}

宽度固定,超出部分不就自动换行了么?

for (var i = 0; i < frequentlyUsedEquipmentList.length; i++) {
        frequentlyUsedEquipment.equipmentName=frequentlyUsedEquipmentList[i].equipmentName;
        frequentlyUsedEquipment.introduction=frequentlyUsedEquipmentList[i].introduction;
        frequentlyUsedEquipment.billingMethodDescription=frequentlyUsedEquipmentList[i].billingMethodDescription;
        frequentlyUsedEquipment.id=frequentlyUsedEquipmentList[i].id;
        frequentlyUsedEquipment.equipmentOpenTimes=frequentlyUsedEquipmentList[i].equipmentOpenTimes;

        var frequentlyUsedEquipmentDiv=$("<div class='cysb_sub'></div>");
        var frequentlyUsedEquipmentDivTop=$("<div id='"+frequentlyUsedEquipment.id+"frequentlyUsedEquipment' class='row'><div class='col-md-12'><div class='col-md-4 col-xs-4 text-center'><img src='https://www.towide.cn:444/organization_"+JSON.parse(localStorage.getItem("user")).organizationId+"/department_"+localStorage.departmentid+"/equipment_images/"+frequentlyUsedEquipment.id+".jpg'></div><div class='cysb_sub_left col-md-8 col-xs-8'><h3>"+frequentlyUsedEquipment.equipmentName+"</h3><h4>"+frequentlyUsedEquipment.introduction+"</h4><span>"+frequentlyUsedEquipment.billingMethodDescription+"</span>&nbsp;&nbsp;<span>单价:10元/"+frequentlyUsedEquipment.billingMethodDescription[1]+"</span></div></div></div>");
        var frequentlyUsedEquipmentDivBottom=$("<div class='row'></div>");
        
        var tableDiv=$("<table class='table table-bordered syyy_table syyy_Table text-center'></table>");
        var tableHead=$('<tr><td class="col-xs-2" style="border:0px;"></td></tr>');
        var firstLine=$('<tr><td class="col-xs-2" style="border:0px;">上午</td></tr>');
        var secondLine=$('<tr><td class="col-xs-2" style="border:0px;">下午</td></tr>');
        var thirdLine=$('<tr><td class="col-xs-2" style="border:0px;">晚上</td></tr>');
    
        //console.log(parseInt(frequentlyUsedEquipmentList[i].equipmentOpenTimes.length/4+1));
        //var tableNumber=parseInt(frequentlyUsedEquipmentList[i].equipmentOpenTimes.length/4+1);
        for (var j = 0; j < frequentlyUsedEquipmentList[i].equipmentOpenTimes.length; j++) {
            var equipmentOpenTimeId=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].id;
            var day=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].dayDescription;
            var week=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].dayOfWeekDescription;
            var am=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amStateDescription;
            var pm=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmStateDescription;
            var night=frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightStateDescription;
        
            var tdWeek=$("<td style='border:0px;' id='"+frequentlyUsedEquipment.id+equipmentOpenTimeId+"'>"+day+"<br>"+week+"</td>");
            
            var tdAm=$('<td class="am0 btnStyle">'+am+'</td>');
            if(frequentlyUsedEquipmentList[i ].equipmentOpenTimes[j].amState=="1"){
                tdAm.addClass("danger"); 
                tdAm.css("background-color","#f391a9");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState=="0"){
                tdAm.addClass("info");
                tdAm.css('background-color',"#5CB0D4");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState=="-1"){
                tdAm.addClass("active");
                tdAm.css("background-color","#74787c");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].amState=="2"){
                tdAm.addClass("warning");
                tdAm.css("background-color","#FFDEAD");
            }
            
            var tdPm=$('<td class="pm1 btnStyle">'+pm+'</td>');
            if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState=="1"){
                tdPm.addClass("danger");
                tdPm.css("background-color","#f391a9");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState=="0"){
                tdPm.addClass("info");
                tdPm.css('background-color',"#5CB0D4");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState=="-1"){
                tdPm.addClass("active");
                tdPm.css("background-color","#74787c");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].pmState=="2"){
                tdPm.addClass("warning");
                tdPm.css("background-color","#FFDEAD");
            }
            
            var tdNight=$('<td class="ni2 btnStyle">'+night+'</td>');
            if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState=="1"){
                tdNight.addClass("danger");
                tdNight.css("background-color","#f391a9");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState=="0"){
                tdNight.addClass("info");
                tdNight.css('background-color',"#5CB0D4");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState=="-1"){
                tdNight.addClass("active");
                tdNight.css("background-color","#74787c");
            }else if(frequentlyUsedEquipmentList[i].equipmentOpenTimes[j].nightState=="2"){
                tdNight.addClass("warning");
                tdNight.css("background-color","#FFDEAD");
            }

            tableHead.append(tdWeek);
            firstLine.append(tdAm);
            secondLine.append(tdPm);
            thirdLine.append(tdNight);
            tableDiv.append(tableHead);
            tableDiv.append(firstLine);
            tableDiv.append(secondLine);
            tableDiv.append(thirdLine);
            
        }
        frequentlyUsedEquipmentDivBottom.append(tableDiv);

        frequentlyUsedEquipmentDivTop.on("click",function(){
            localStorage.equipmentid=this.id[0];
            location.href="ExperimentReservation_xq.html";
        });

        frequentlyUsedEquipmentDiv.append(frequentlyUsedEquipmentDivTop);
        frequentlyUsedEquipmentDiv.append(frequentlyUsedEquipmentDivBottom);
        $("#syyy_cysb").append(frequentlyUsedEquipmentDiv);
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏