Javascript “插入HTML表格行”；标题「；基于动态可见元素数据属性

假设我有一个包含行的表，其中包含一个具有数据时间属性的表单元格，并且可能可见，也可能不可见（即display:none）。此可见性是动态的，行在任何时候都可能更改

这些行中只有三个表单元格中的第一个包含数据时间属性

表行已根据其子级的数据时间属性值分组。我的目标是利用JS/jQuery在任何特定数据时间值的第一个/唯一可见的引用上方插入一个新表行。此行应包含一个表格单元格，该单元格跨越表格的整个宽度，并具有与相应数据时间值相等的文本

示例开始：

<table>
  <tr style="display:none;">
    <td data-time="7:15 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="9:30 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr style="display:none;">
    <td data-time="9:30 pm"></td>
    <td></td>
    <td></td>
  </tr>
<table>

示例目标：

<table>
  <tr style="display:none;">
    <td data-time="7:15 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">8:00 pm</td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td data-time="8:00 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">9:30 pm</td>
  </tr>
  <tr>
    <td data-time="9:30 pm"></td>
    <td></td>
    <td></td>
  </tr>
  <tr style="display:none;">
    <td data-time="9:30 pm"></td>
    <td></td>
    <td></td>
  </tr>
<table>

晚上八点
晚上9:30

这就是您要寻找的：-

$（'#addRow'）。单击（函数（）{
$（'td[data time]，$（'tr'）。不是（'tr[style=“display:none；””）。每个（函数（i，o）{
var lastelement=$（'td[data time=“”+$（this.data（'time'）+“]）.first（）；
if（（lastelement.parent（'tr'）.prev（'tr.textRow'））.length==0）
{
var newelement='+$（this）.data（'time'）+''
（新元素）之前的lastelement.parent（）；
}
});

遍历行并存储日期时间值。将其与上次看到的日期时间值进行比较。如果不同，则插入一个新行，并更新上次看到的日期时间值。如果没有不同，则继续下一行。

   $('#addRow').click(function(){
     $('td[data-time]',$('tr').not('tr[style="display:none;"]')).each(function(i,o){
        var lastelement = $('td[data-time="' + $(this).data('time') + '"]').first();

        if((lastelement.parent('tr').prev('tr.textRow')).length == 0)
        {
        var newelement = '<tr class="textRow"><td colspan="3">' + $(this).data('time') + '</td> </tr>'
        lastelement.parent().before(newelement);
        }

    });