javascript - Hide and show on specific row? -
when click on image show , hide row show sub rows , same in hide .
problem define in snippet .
$(".sub").hide(); function diffimage(img) { if (img.src.match("minus")) { img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif"; // $(img).closest('tr').next('.sub').hide(); $(".sub").hide(); } else { img.src = "http://www.bls.gov/images/icons/icon_small_minus.gif"; // $(img).closest('tr').next('.sub').show(); $(".sub").show(); } } ! function($) { $(".sub").hide(); $(document).on("click", "ul.nav li.parent > > span.icon", function() { // $(this).find('em:first').toggleclass("glyphicon-minus"); $(this).show(); // $('.sub').show(); }); $(".sidebar span.icon").find('em:first').addclass("glyphicon-plus"); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table style="width:100%;" data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc"> <thead> <tr> <th> </th> <th data-checkbox="true"></th> <th data-field="state" data-sortable="true">category name</th> <th data-field="state" data-sortable="true">product image</th> <th data-field="state" data-sortable="true">product name</th> <th data-field="state" data-sortable="true">seller name</th> <th data-field="state" data-sortable="true">price</th> <th data-field="state" data-sortable="true">last price 1</th> <th data-field="state" data-sortable="true">last price 2</th> <th data-field="state" data-sortable="true">seller rating</th> </tr> </thead> <tbody> <tr> <td> </td> <td> <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffimage(this)"> </td> <td> <p>nighty</p> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"></object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p>559</p> </td> <td> <p>updating</p> </td> <td> <p>updating</p> </td> <td> <p>4.8</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979"> <object data="http://n1.sdlcdn.com/imgs/b/b/w/kanika-pink-satin-nighty-sdl202281664-1-f3a2f.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979"> <p>kanika pink satin nighty</p> </a> </td> <td> <p>r. s. enterprises</p> </td> <td> <p class="tab">291</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.9</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p class="tab">559</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.8</p> </td> </tr> <tr> <td> </td> <td> <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1" onclick="diffimage(this)"> </td> <td> <p>nighty</p> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"></object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p>559</p> </td> <td> <p>updating</p> </td> <td> <p>updating</p> </td> <td> <p>4.8</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p class="tab">559</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.8</p> </td> </tr> </tbody> </table>i want when click on main row sub row display or hide ?
instead of adding inline onclick event, prefer binding on('click') event jquery.
when image clicked, find parent (table cell) , parent (the table row).
next select table rows until find row doesn't have .sub class. toggle view.
$(".sub").hide(); $('.image1').on('click', function() { var elem = $(this) , img = elem.attr('src') , parent = $(this).parent().parent(); if( img.match('minus') ) { elem.attr('src', 'http://www.bls.gov/images/icons/icon_small_plus.gif' ); } else { elem.attr('src', 'http://www.bls.gov/images/icons/icon_small_minus.gif' ); } parent.nextuntil('tr:not(.sub)').toggle(); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table style="width:100%;" data-toggle="table" data-url="tables/data1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc"> <thead> <tr> <th> </th> <th data-checkbox="true"></th> <th data-field="state" data-sortable="true">category name</th> <th data-field="state" data-sortable="true">product image</th> <th data-field="state" data-sortable="true">product name</th> <th data-field="state" data-sortable="true">seller name</th> <th data-field="state" data-sortable="true">price</th> <th data-field="state" data-sortable="true">last price 1</th> <th data-field="state" data-sortable="true">last price 2</th> <th data-field="state" data-sortable="true">seller rating</th> </tr> </thead> <tbody> <tr> <td> </td> <td> <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1"> </td> <td> <p>nighty</p> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"></object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p>559</p> </td> <td> <p>updating</p> </td> <td> <p>updating</p> </td> <td> <p>4.8</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979"> <object data="http://n1.sdlcdn.com/imgs/b/b/w/kanika-pink-satin-nighty-sdl202281664-1-f3a2f.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/kanika-pink-satin-nighty/670188371979"> <p>kanika pink satin nighty</p> </a> </td> <td> <p>r. s. enterprises</p> </td> <td> <p class="tab">291</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.9</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p class="tab">559</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.8</p> </td> </tr> <tr> <td> </td> <td> <img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1" id="image1"> </td> <td> <p>nighty</p> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" styhttp://www.bls.gov/images/icons/icon_small_plus.gif <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"></object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p>559</p> </td> <td> <p>updating</p> </td> <td> <p>updating</p> </td> <td> <p>4.8</p> </td> </tr> <tr class="sub" style="display: table-row;"> <td></td> <td> </td> <td> </td> <td> <p> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <object data="http://n4.sdlcdn.com/imgs/a/v/c/masha-radiant-combo-of-purple-sdl825929760-1-4aa36.jpg" type="image/png" style="width:45px;height:45px;"> <img src="./snapdeal- comprice solution_files/photo_na.jpg" style="width:45px;height:45px;"> </object> </a> </p> </td> <td> <a target="_blank" href="http://www.snapdeal.com/product/masha-radiant-combo-of-purple/671007367029"> <p>masha purple satin nighty</p> </a> </td> <td> <p>b boy body wears</p> </td> <td> <p class="tab">559</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">updating</p> </td> <td> <p class="tab">4.8</p> </td> </tr> </tbody> </table>
Comments
Post a Comment