Можно ли вставлять строку с полужирным шрифтом после каждых 10 строк с «обычным» текстом

Question

] У меня есть таблица, в которой я пытаюсь реализовать разбиение на страницы с заголовком Dynami c, поэтому я использую строки со стилем: font-weight: bold. они будут играть роль читателей в моей нумерации страниц. Можно ли вставлять каждые 10 строк одну строку с font-weight: bold? Я не знаю, как это сделать и что я здесь делаю не так.

вот что я сделал:

enter code here

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

Answer 1

Вы можете сделать это так: перебрать все строки <tbody> и использовать оператор модуля (%) и функцию 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>