是否可以在每 10 行带有“普通”文本的行之后插入一行带有粗体文本的行

Question

]我有一个表，我正在尝试使用动态标题实现分页，这就是为什么我使用样式为：font-weight:bold 的行。他们将在我的分页中扮演听者的角色。是否可以每 10 行插入一行字体粗体：粗体？我不知道该怎么做以及我在这里做错了什么。

这是我所做的：

enter code here

https://codepen.io/Dimi98765/pen/yLeawEK

Answer 1

您可以这样做：遍历<tbody> 的所有行并使用modulus operator (%) 和index() 函数将bold 类设置为每10 行。如果您希望每 11 行加粗（正如您所写，您希望每 10 行后加粗一行），只需将行 if(count % 10 === 0) 更改为 if(count % 11 === 0)。

$(document).ready(function() {
  LoadData();
  $("#calendar tbody tr").each(function() {
    let count = $(this).index() + 1;
    if(count % 10 === 0){
    $(this).addClass("bold");
    }
  });
});

var tableId = "Tabledta";


function LoadData() {
  var tab = $("<table  id=calendar class=MyTable border=1></table>");
  //var thead = $("<thead></thead>");
  var tbody = $('<tbody id="paginate"></tbody>');

  for (var j = 1; j < 7; j++) {
    var theadrow = $('<tr/>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">FSE' + "&nbsp;" + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Monday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Tuesday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Wednesday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Thursday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Friday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Saturday' + "&nbsp;" + j + '</td>');
    theadrow.append('<td style="padding:5px;font-weight:bold;">Sunday' + "&nbsp;" + j + '</td>');
    tab.append(theadrow);

  }



  for (var i = 1; i < 51; i++) {
    var trow = $("<tr/>").data("id", i);
    trow.append("<td>FSE" + i + "</td>");
    trow.append("<td>Monday" + i + "</td>");
    trow.append("<td>Tuesday" + i + "</td>");
    trow.append("<td>Wednesday" + i + "</td>");
    trow.append("<td> Thursday" + i + "</td>");
    trow.append(" <td>Friday" + i + "</td>");
    trow.append("<td>Saturday" + i + "</td>");
    trow.append("<td>Sunday" + i + "</td>");
    tbody.append(trow);
  }


  //tab.append(thead);
  tab.append(tbody);
  $("#" + tableId).html(tab);
}

.bold {
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=Tabledta></div>