1

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

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

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

1 回答 1

0

这是你想要的：-

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);
        }

    });
于 2013-03-25T23:14:15.607 回答