javascript - 基于动态可见元素数据属性插入 HTML 表格行 "Heading"

Question

假设我有一个包含行的表格，其中包含具有数据时间属性的表格单元格，并且可能或可能不可见(即显示:无)。这种可见性是动态的，并且在任何时候行都可能发生变化。

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

表行已根据其子级的数据时间属性值进行分组。我的目标是利用 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>

Answer 1

这就是您要找的吗:-

http://jsfiddle.net/9XTat/

   $('#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);
        }

    });