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

Posted 2023-05-08

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

【英文标题】：Is it possible to insert a row with bold-text after every 10 rows with "normal" text

【发布时间】：2020-10-06 08:43:49

【问题描述】：

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

这是我所做的：

enter code here

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

【问题讨论】：

minimal reproducible example 和 meta.***.com/questions/358992/…

请参阅How to Ask：如果可以创建一个您可以链接到的问题的实时示例（例如，在sqlfiddle.com 或jsbin.com 上）然后这样做- 但也将代码复制到问题本身。不是每个人都可以访问外部网站，而且链接可能会随着时间的推移而中断。

对不起，我不太明白如何在这里添加链接，但不知怎的，我做到了:)

【参考方案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>

【讨论】：

它的工作原理与我想要做的非常接近，但我正在更改表数据而不是推送行，这是我想要介于两者之间的内容

这个想法是让我说，一年的所有日子，并把它们放在每周的标题中......但我想这不太可能......

1.第一天 30.12.2019 只是 2020 年第一周 getDateRangeOfWeek 的结果（我调整并从这里获得的函数：codepen.io/Venugopal46/pen/WrxdLY）。 2.我在这里推了标题下方的第一行：jsfiddle.net/f2hqexro

@Dimitri 我已将其固定为 2021 年和 2022 年以及直到 2050 年的所有年份：jsfiddle.net/gje16dby 原因在于我从提到的 codepen 获得的函数 getWeek。行 date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);需要调整几年。

完美！再次感谢！