nとnの間で乗算クラスを見つけて変更する方法
-
22-09-2019 - |
質問
いくつかのテーブル構造があります。
<tr class="row-2"><tr>
<tr class="row-3">..<tr>
<tr class="row-4">..<tr>
<tr class="row-5">..<tr>
<tr class="row-6">..<tr>
<tr class="row-7"><tr>
<tr class="row-8">..<tr>
<tr class="row-9">..<tr>
<tr class="row-10">..<tr>
<tr class="row-11">..<tr>
...etc
この例では、クラス「row-2」および「row-7」を持つ TR が、子行を展開する親商品リンクです。
<script>
$(function() {
$('tr.parent')
.css("cursor","pointer")
.css("color","red")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
</script>
行 -3...-6 は行 -2 の子ですそして行 -8...-11 は行 -7 の子です
row-2、row-7 などを見つけて、2 番目のクラス「親」と類似したクラス (id="row-2"、id="row-7" など) を追加するにはどうすればよいですか?また、それぞれを追加する必要があります TR 間 行-2 そして 行7 クラスは前の親行と等しい。要するに、次のようなものが必要です。
<tr class="row-2 parent" id="row-2"><tr>
<tr class="row-3 child-row2">..<tr>
<tr class="row-4 child-row2">..<tr>
<tr class="row-5 child-row2">..<tr>
<tr class="row-6 child-row2">..<tr>
<tr class="row-7 parent" id="row-7"><tr>
<tr class="row-8 child-row7">..<tr>
<tr class="row-9 child-row7">..<tr>
<tr class="row-10 child-row7">..<tr>
<tr class="row-11 child-row7">..<tr>
..etc
解決
一つの方法は、必要なクラスとidのを設定するために、すべての行にある2つのパスを行うことです。最初のパスでは、クラス名と同一のIDを追加し、また、行2及び行7にparent
クラスを追加します。第二のパスにおいて、各.parent
行を見つけ、次の親になるまで、その兄弟にchild-<id>
クラスを追加します。代わりに、行2及び行7の値をハードコーディングから、これはすべてのヘッダ項目が代わり<th>
素子で、<td>
要素内に含まれていることを前提としています。
ここではいくつかのコードがあります: http://jsfiddle.net/vYTW2/する
/**
* Do a two pass on all rows to set them up.
* In the first pass, add the same id as class, and
* add the "parent" class to the row.
*
* Assuming all product header rows contain a
* <th> element
*/
$('table tr th').each(function() {
var row = $(this).parent('tr');
var id = row.attr('class');
row.attr('id', id);
row.addClass('parent');
});
/**
* In the second pass, run through all header rows
* (that have the class parent) and mark all next siblings
* with class "child-rowX" until we see the next parent row.
*/
$('tr.parent').each(function() {
var id = $(this).attr('id');
var className = 'child-' + id;
$(this).nextUntil('.parent').addClass(className);
});
所属していません StackOverflow