Removing divs with jquery

Removing divs with jquery - javascript

I have been trying to apply the remove function to my html page but with no result until now. I have three rows and they all have a remove button, I would like to create an effect that when you click on the remove button the whole row block disappears. Any help would be deeply appreciated.
HTML
<div class="row deletedRow">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo1.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 8 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" />
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" />
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row deletedRow">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo2.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 7 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" />
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" />
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col1">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="../stylesheets/shore-excursions/images/background/photo3.jpg" alt="" height="124" width="155" /></td>
<td>
<h3>Velit mauris scelerisque risus lorem vatis</h3>
<p>Grand Cayman, Cayman Islands</p>
<ul>
<li>Duration 3.5 hours</li>
<li>Ages 7 & Up</li>
<li>Moderate Activity
<span class="box-tooltip"><img src="../images/shore-excursions/icon-help13x13.gif" width="13" height="13" alt="" />
<div>
<span class="arrow"></span>
<p class="red">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit nostrud mas consectetur </p>
</div>
</span>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_add_to_compare.gif" alt="ADD TO COMPARE" height="31" width="155" />
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col2">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="with-border">
<p>Adults:</p><p class="red">$100</p>
</td>
</tr>
<tr>
<td>
<p>Children:</p><p class="red">$60</p>
</td>
</tr>
<tr>
<td>
<p class="font11">Limited Available</p><p class="red-font11">Only 6 left!</p>
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn-remove.png" alt="REMOVE" height="32" width="148" />
</td>
</tr>
<tr>
<td>
<img src="../stylesheets/shore-excursions/images/buttons/btn_save_to_favorites.jpg" alt="SAVE TO FAVORITES" height="31" width="153" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you in advance!

You can use .closest() to climb up the parents to your class="row" <div>, like this:
$(".removeRow").click(function() {
$(this).closest("div.row").remove();
});

Here is a JSFiddle I made that basically does a loop that will walk up the DOM tree until it finds the parent node that has the class "row" or the body. If the node with the class is found it will remove it otherwise nothing is removed.
JSFiddle Example

Related

Two column checkboxes layout using just css

The following code is a dynamically generated part of a form and I only can style it using css.
No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.
The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.
I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet.
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>

You can use the CSS float and clear in order to do that. Here is an example.
.element{
float:right;
}
.element:nth-child(odd){
clear:right;
}
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>

If you can style the parent element of those four divs, you can set
.parent {
columns: 2;
}
This will work in IE10+. https://jsfiddle.net/c979dxLe/1/
You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns

I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:
1 4
2 5
3
CSS:
.parent {
columns: 2;
}
.parent > * {
width: 100%;
}

How to find text inside table with div parent

I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the four cells (left to rigth) the last cell is not important
This is my HTML:
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top">
alexis
<div>
<div class="order-details-bottom">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top">
rtynbv
<div>
<div class="order-details-bottom">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
And this is my Script:
$("#buscador").keyup(function() {
var dInput = $(this).val();
if (!this.value) {
$('div.caja-orden-curso').fadeIn();
}
else
{
$("table#perrito").each(function()
{
$(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
$(this).show() : $(this).parents('div.caja-orden-curso').fadeOut();
});
}
});
My example only work with the first cell with the other three cells i cant.
This is my fiddle

IDs in a page must be unique. So change id="perrito" to class="perrito" and do the following.
$("table.perrito").each(function() {
if ($(this).find('div:contains(' + dInput + ')').length)
$(this).parents('div.caja-orden-curso').fadeIn();
else
$(this).parents('div.caja-orden-curso').fadeOut();
});
DEMO

Here you used find funtion on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may try this
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top top-order">
alexis
<div>
<div class="order-details-bottom top-order">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top top-order">
rtynbv
<div>
<div class="order-details-bottom top-order">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>

If you want search or sort or ... on table , you can use DataTables jQuery plugins
Pagination, instant search and multi-column ordering
Supports almostany data source: Easily theme-able: DataTables, jQuery
UI, Bootstrap, Foundation
Ajax auto loading of data
and ...
$('#myTable').DataTable();
DataTables jQuery plugins

Hide and show on specific row?

When I click on image that show and hide the row then it show all sub rows and same as in hide .
Problem clearly 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 > a > 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 just want when click on main row then only its sub row display or hide ?

You have to do like
$(".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').nextUntil("tr:not(.sub)").hide();
} else {
img.src = "http://www.bls.gov/images/icons/icon_small_minus.gif";
$(img).closest('tr').nextUntil("tr:not(.sub)").show();
}
}
! function($) {
$(".sub").hide();
$(".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 class="parent">
<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 class="parent">
<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>

Instead of adding a inline onclick event, I prefer binding an on('click') event with jQuery.
When the image is clicked, we find its parent (table cell) and that parent (the table row).
Next we select all the table rows until we find a row that doesn't have the .sub class. We toggle their 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>

Show the number of table rows of a table in a h1 headline

I would like to show the total number of table rows in a h1 headline.
I have a table in this format:
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
This is the headline where I would like to show the number of table rows, which would be 4 (including headers) for the example table mentioned previously:
<h1 style="text-align:center;">Headline (X nr of table rows)</h1>
I have found this javascript and several others to calculate the number of rows, but I don't know how to show the number in the headline.
<script language="javascript">
var rowCount = document.getElementById('sortabletable').rows.length;
</script>

Try this:
HTML
<h1 id="numberOfRows">
</h1>
JavaScript
var rows = document.getElementsByTagName("tr").length;
document.getElementById("numberOfRows").innerHTML = "Number of rows" + rows;

document.querySelector('h1').innerHTML = rows;
Though better to give your h1 an id and use:
document.getElementById('THE_ID').innerHTML = rows;`

First, you need some means by which you can refer to the relevant <h1> element:
<h1 style="text-align:center;">Headline (X nr of table rows)</h1>
Given that it's the first, and should be the only, <h1> you can use either:
document.querySelector('h1');
Or:
document.getElementsByTagName('h1')[0];
Which leads to:
document.querySelector('h1').textContent = 'Headline (' + rowcount+ ' nr of table rows)';
var rowcount = document.getElementById('sortabletable').rows.length;
document.querySelector('h1').textContent = 'Headline (' + rowcount+ ' nr of table rows)';
<h1></h1>
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
Or:
document.getElementsByTagName('h1')[0].textContent = 'Headline (' + rowcount + ' nr of table rows)';
var rowcount = document.getElementById('sortabletable').rows.length;
document.getElementsByTagName('h1')[0].textContent = 'Headline (' + rowcount+ ' nr of table rows)';
<h1></h1>
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
Or, using just CSS:
body {
counter-reset: rowCount;
}
#sortabletable tr {
counter-increment: rowCount;
}
#count::before {
content: ' (' counter(rowCount) ')';
}
body {
counter-reset: rowCount;
}
#sortabletable tr {
counter-increment: rowCount;
}
#count::before {
content: ' (' counter(rowCount) ')';
}
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
<h1>Headline <span id="count"></span></h1>
Though, unfortunately, the CSS approach can only work if the <h1> element appears after the <table> (to allow the counter to increment before we apply its results in the displaying element).

Here is the code:
var rows = document.getElementById('sortabletable').getElementsByTagName("tr").length;
document.getElementById('row_count').innerHTML = 'Headline ('+ rows +' nr of table rows)';
<h1 style="text-align:center;" id="row_count">Headline (X nr of table rows)</h1>

jquery animate() and slideUp() don't work in IE8

I'm animating table rows to slide up when deleting them, with jquery, which is cool in FF, Safari and Chrome. But surprise, suprise...!! It doesn't work in IE8. The worst thing is that IE8 doesn't show any error, so how am I supposed to debug.
Also I know tables are problematic when it comes to effects. That's why I replaced tr with a div using replaceWith().
Here's my jquery:
$('.remove').live('click', removeRowSlider);
function removeRowSlider(e){
var thisElem = $(this);
if( thisElem.hasClass('remove') ){
var tr = thisElem.closest('tr').parents('tr'),
supportDiv = $('<div style="height: 30px; width: 470px">').css({'height': tr.height()});
tr.animate({'opacity': 0.2}, function(){
tr.replaceWith(supportDiv);
supportDiv.slideUp(400, function(){
$(this).remove();
});
});
}
e.preventDefault();
}
HTML:
<table>
<thead>
<tr>
<th class="first-td">Item(s)</th>
<th class="qty-col">Qty</th>
<th class="price-col">Price</th>
<th class="price-col">Subtotal</th>
<th class="del-opt">Delivery options</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Thanks for your help...

When it comes to IE, nothing surprises me!
I don't know if this works with your example, but sometimes I've had problems appending elements without an end-tag. So you could try this:
supportDiv = $('<div style="height: 30px; width: 470px;"></div>')...
Hope it works out for you!

Develop Reference

JavaScript is the programming language of the Web.

Removing divs with jquery - javascript

You can use .closest() to climb up the parents to your class="row" <div>, like this: $(".removeRow").click(function() { $(this).closest("div.row").remove(); });

Here is a JSFiddle I made that basically does a loop that will walk up the DOM tree until it finds the parent node that has the class "row" or the body. If the node with the class is found it will remove it otherwise nothing is removed. JSFiddle Example

Related

Two column checkboxes layout using just css

How to find text inside table with div parent

Hide and show on specific row?

Show the number of table rows of a table in a h1 headline

jquery animate() and slideUp() don't work in IE8

Categories

Resources