1

data-time属性を持つテーブルセルを含む行を含むテーブルがあり、表示される場合と表示されない場合があります（つまり、display：none）。この可視性は動的であり、いつでも行が変更される可能性があります。

これらの行の3つのテーブルセルの最初のセルにのみ、data-time属性が含まれています。

テーブルの行は、子のデータ時間属性値に従ってすでにグループ化されています。私の目標は、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 に答える