开发者

How to find and change multiply th classes between n & n

I have some table structure:

    <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

for this example TR with classes "row-2" and "row-7" is parrent product link wich expand child rows.

<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>

Rows -3...-6 is child of row-2 and Rows -8...-11 is child of row-7

How can I find row-2, row-7, etc then add second class "parent" and ID similar class (id="row-2", id="row-7", etc)? Also I need add in each TR between row-2 and row-7 class equal previous parent row. In bottom line I need something like this:

        <tr class="row-2 parent" id="row-2"><tr>
        <tr class="row-3 child-row2">..&l开发者_开发技巧t;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


One way is to do a two-pass on all rows, to set up the required classes and id's. In the first pass, add an id same as the class name, and also add the parent class to row-2, and row-7. In the second pass, find each .parent row, and add child-<id> class to their siblings until the next parent. Instead of hard-coding the values for row-2 and row-7, this assumes that all header items are contained inside a <th> element, instead of a <td> element.

Here's some code: 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);
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜