JQuery - テキストを変更したときに列を検索すると、前に新しい行が追加されます

Question

列を検索する動的な方法を探していて、値が変更されたときに新しい行を挿入する必要があります。

以下の表を検討してください。

<table id="testTable"> 
    <tbody> 
    <tr> 
     <th>Letter</th> 
     <th>Amount</th> 
    </tr> 
    <tr> 
     <td class="parent">A</td> 
     <td>110</td> 
    </tr> 
    <tr> 
     <td class="parent">A</td> 
     <td>99</td> 
    </tr> 
    <tr> 
     <td class="parent">A</td> 
     <td>106</td> 
    </tr> 
    <tr> 
     <td class="parent">A</td> 
     <td>120</td> 
    </tr> 
    <tr> 
     <td class="parent">C</td> 
     <td>103</td> 
    </tr> 
    </tbody> 
</table> 

そのような親クラスで「C」に「A」から行くような変化を検出すると、私は「C」または任意の値の前に挿入された行を希望以前のものと異なるかもしれない。私は一種のいくつかのデータをキャプチャするためにこれを始めているが、これまで得ていない：

$('#' + value + ' .parent').each(function() { 
     var firstVal = $(this).html(); 
     var secondVal = $(this).next().html(); 
     if(firstVal == secondVal) { 
     } 
     else { 
      $(this).parent().after('</tr><tr><td class="sub0">Sub Total</td></tr>'); 
     } 
    }) 

をあなたがしなければならないすべては、このような値とprepend行を比較している私のJSFiddle

Answer 1

$(document).ready(function(){ 
var lastVal = ''; 
$('#testTable .parent').each(function() { 
     var currentVal = $(this).html(); 
     if(currentVal != lastVal) { 
      $(this).parent().before('</tr><tr><td class="sub0">Sub Total</td></tr>'); 
      lastVal = currentVal; 
     } 
    }); 
}); 

Fiddle

Answer 2

を参照してください。

let prev = ""; 
$('.parent').each(function() { 
    let test = $(this).text(); 
    if(test != prev && prev != ""){ 
    //$(this).prepend('<tr><td class="separator"><hr></td></tr>');//add it to the same row... 
    $(this).parent().before('<tr><td colspan="2" class="separator"><hr></td></tr>'); 
    } 
    prev = test; 
    //console.log(test); 
}); 

Answer 3

わずかあなたのコードの変更が必要になります。

$(document).ready(function() { 
 
    var lastVal = ''; 
 
    $('#testTable .parent').each(function() { 
 
    var currentVal = $(this).html(); 
 
    if (currentVal != lastVal) { 
 
     $(this).parent().before('</tr><tr><td class="sub0">Sub Total</td></tr>'); 
 
     lastVal = currentVal; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="testTable"> 
 
    <tbody> 
 
    <tr> 
 
     <th>Letter</th> 
 
     <th>Amount</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>110</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>99</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>106</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>120</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">C</td> 
 
     <td>103</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

var perent = $('.parent'); 
 
$.each(perent, function(i, y) { 
 
    if ($(perent[i]).html() != $(perent[i + 1]).html()) { 
 
    $(this).parent().after('</tr><tr><td class="sub0">Sub Total</td></tr>'); 
 
    } 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="testTable"> 
 
    <tbody> 
 
    <tr> 
 
     <th>Letter</th> 
 
     <th>Amount</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>110</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>99</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>106</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">A</td> 
 
     <td>120</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="parent">C</td> 
 
     <td>103</td> 
 
    </tr> 
 
    </tbody> 
 
</table>