Preparation code

<table class="listings"><thead>
    <tr>
        <td class="checkbox-column"><input class="global-select-listing" type="checkbox"></td>
        <td style="width: 280px;">Property</td>
        <td style="width: 150px;">ID/HA ID</td>
        <td style="width: 200px;">Listing Model</td>
        <td>PPB Level</td>
    </tr>
    <tr class="global-selection" style="display: none;">
        <td colspan="3">
            <span class="pull-right multi-select-message">You can edit all selected items at once<i class="icon-chevron-right"></i></span>
        </td>
        <td>
            <select class="span2">
                <option>Pay per booking</option>
                <option>None</option>
            </select>
        </td>
        <td>
            <select class="span1">
                <option>5%</option>
                <option>10%</option>
                <option>15%</option>
                <option>20%</option>
                <option>25%</option>
                <option>30%</option>
            </select>
        </td>
    </tr>
</thead>
<tfoot>
    <tr>
        <td colspan="5">
            <div class="pagination pagination-small">
                <ul>
                    <li><a href="#" class="prev"><i class="icon-chevron-left"></i></a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" class="next"><i class="icon-chevron-right"></i></a></li>
                </ul>
            </div>
            <div class="pull-right filter">
                <form>
                    <span class="help-inline">Show</span>
                    <select class="span1">
                        <option>10</option>
                        <option>30</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                    <span class="help-inline">Properties</span>
                </form>
            </div>
        </td>
    </tr>
</tfoot>
<tbody class="products">

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">Meadowlands #1</a>
            <span class="address">19833 Shady Ln...</span>
        </div>
    </td>
    <td>
        XJDHYE1<br>
        177382910
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            Pay per booking
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            10%
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello1</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello2</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello3</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="display: inline;">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="display: inline;">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">hello4</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

<tr class="">
    <td><input type="checkbox" class="select-listing"></td>
    <td>
        <img class="property" src="/assets/images/filler.png" alt="filler image">
        <div class="property-info">
            <a href="#">world5</a>
            <span class="address">address</span>
        </div>
    </td>
    <td>
        pid<br>
        haid
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span2">
                    <option>Pay per booking</option>
                    <option>None</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            listingmodel
        </span>
    </td>
    <td>
        <div class="single-product-filter" style="display: none;">
            <form>
                <select class="span1">
                    <option>5%</option>
                    <option>10%</option>
                    <option>15%</option>
                    <option>20%</option>
                    <option>25%</option>
                    <option>30%</option>
                </select>
            </form>
        </div>
        <span class="single-product-selection" style="">
            ppblevel
        </span>
    </td>
</tr>

</tbody>
</table><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

	Property	ID/HA ID	Listing Model	PPB Level
You can edit all selected items at once			Pay per booking None	5% 10% 15% 20% 25% 30%
1 2 3 4 5 Show 10 30 50 100 Properties
	Meadowlands #1 19833 Shady Ln...	XJDHYE1 177382910	Pay per booking None Pay per booking	5% 10% 15% 20% 25% 30% 10%
	hello1 address	pid haid	Pay per booking None listingmodel	5% 10% 15% 20% 25% 30% ppblevel
	hello2 address	pid haid	Pay per booking None listingmodel	5% 10% 15% 20% 25% 30% ppblevel
	hello3 address	pid haid	Pay per booking None listingmodel	5% 10% 15% 20% 25% 30% ppblevel
	hello4 address	pid haid	Pay per booking None listingmodel	5% 10% 15% 20% 25% 30% ppblevel
	world5 address	pid haid	Pay per booking None listingmodel	5% 10% 15% 20% 25% 30% ppblevel

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$(".single-product-filter").hide();
$(".single-product-selection").show();  

var listings = $(".select-listing:checked");
listings.closest("tr").find(".single-product-filter").hide();
listings.closest("tr").find(".single-product-selection").show(); 

var listings = $(".select-listing:checked");
listings.parent().parent().find(".single-product-filter").hide();
listings.parent().parent().find(".single-product-selection").show();  

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments