插入HTML表格行"标题"基于动态可见元素数据属性的研究

Inserting HTML Table Row "Heading" Based On Dynamic Visible Element Data Attribute

本文关键字：quot 元素 数据属性 动态 表格 HTML 标题 插入 于动态      更新时间：2023-09-26

假设我有一个包含行的表，其中包含一个具有数据时间属性的表单元格，可能是可见的，也可能是不可见的。显示:没有)。这种可见性是动态的，任何时候一行都可能改变。

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

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

这是你要找的吗? -

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);
        }
    });
相关文章：