问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Heuer
    22615181

    clipboard.png

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

    clipboard.png

    clipboard.png
    clipboard.png

    javascriptjquery
    阅读 4k
    3 个回答
    得票最新
    头像
    dablwow80
      4.9k21119
      ✓ 已被采纳

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

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

      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);

}
      头像
      柳周侯爷
        7719

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

        头像
        Heuer
          22615181
          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);
    }
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题