jQuery根据行和列名加快向表格单元格添加工具提示

问题描述

我目前使用此函数根据行名(行中最左侧的单元格)和列名(列中最顶部单元格的值)向每个表格单元格添加工具提示。它按预期工作,但根据 Google Chrome DevTools,它消耗了大量的脚本时间。如何加快速度?

const add_tooltip = function(context) {
  context.find("th").each(function() {
    $(this).attr("title",$(this).text());
  });

  context.find("td").each(function() {
    $(this).attr("title",$(this).siblings("th").text() + "," + context.find("thead th").eq($(this).index()).text());
  });
};

add_tooltip($("table"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>0</th>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <th>2</th>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

解决方法

这是我在收集大家的反馈后提出的新功能。我已经对其进行了测试,它似乎并不比在使用 func meetingEnded() { DispatchQueue.main.async { [weak self] in self?.onMeetingEnded() } } 构造表时包含 title 属性慢多少(这使得代码非常笨拙)。

$.append()