Develop Reference

How to add numbers in a <td> to an array only if another <td> contains certain text

I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!

To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>

Why my variable not working in template file

I have a template
<tr ng-repeat="emp in legalDocAssetData">
<td>
<input name="legalAsset_name{{$index}}" ng-model="emp.Name" ng-disabled="!enabledEdit[editCount++]" />
</td>
<td>
<select name="legalAsset_selection{{$index}}" ng-model="emp.Selection__c" ng-options="employe.name as employe.name for employe in borrowerDesignationList" ng-disabled="!enabledEdit[editCount++]"></select>
</td>
<td>
<input name="legalAsset_email{{$index}}" ng-model="emp.Email_Address__c" ng-disabled="!enabledEdit[editCount++]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn" ng-disabled="isReadOnly" ng-click="editEmployee(editCount)"><i class="fa fa-edit"></i></button>
</div>
</td>
</tr>
<tr ng-repeat="emp in achData">
<td>
<input name="ach_name{{$index}}" ng-model="emp.Name" ng-disabled="!enabledEdit[editCount++]" />
</td>
<td>
<select name="ach_selection{{$index}}" ng-model="emp.Selection__c" ng-options="employe.name as employe.name for employe in achList" ng-disabled="!enabledEdit[editCount++]"></select>
</td>
<td>
<input name="ach_email{{$index}}" ng-model="emp.Email_Address__c" ng-disabled="!enabledEdit[editCount++]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn" ng-disabled="isReadOnly" ng-click="editEmployee(editCount)"><i class="fa fa-edit"></i></button>
</div>
</td>
</tr>
And, in controller, I have a variable
$scope.editCount=0
My template is not loading and gives an error
angular.min.js:103 Error: [$parse:syntax]
What is the issue here?

HTML:Highlight selected link or label

In my Html Page I need to keep the link selected when i click on it:
The HTML Code:
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
The Other option is to change the link with simple label, and need to keep the label selected when click on it:
The Html code will be:
<table class="main-dev">
<tr>
<td>
labelA
</td>
</tr>
<tr>
<td>
labelB
</td>
</td>
</tr>
<tr>
<td>
labelC
</td>
</tr>
<tr>
<td>
labelD
</td>
</tr>
</table>

you can do this easily with JQ . see snippet below
if you want to remove selected class when click again on the same link, change addClass to toggleClass
var link = $(".titleForm")
$(link).on("click",function() {
var otherLinks = $(this).parents("tr").siblings().find(".selected")
$(this).addClass("selected")
$(otherLinks).removeClass("selected")
})
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>

Greasemonkey script to add textbox to each row on existing site

I'm trying to figure out how to add a textbox to the last column of each row on a site. My Java/JQuery experience is quite limited and can't really wrap my head around this one.
I've pasted the code for one of the tables below.
I've tried getElementsByClassName, but not sure what to call.
Any help would be much appreciated!
<tbody>
<tr id="g_1_hKWlkSGU" class="tr-first stage-scheduled" style="cursor: pointer;" title="">
<td class="cell_ib icons left">
<span class="icons left">
<span class="tomyga icon0">
</span>
</span>
<div data-context="g:g_1_hKWlkSGU" class="mg_dropdown">
<div class="mg_dropdown_wrapper">
<span class="mg_dropdown_selected">-</span><span class="down_arrow">
</span>
</div>
</div>
</td>
<td class="cell_ad time">19:45</td>
<td class="cell_aa timer">
<span> </span>
</td>
<td class="cell_ab team-home"><span class="padr">Barcelona</span>
</td>
<td class="cell_sa score">-</td>
<td class="cell_ac team-away">
<span class="padl">Celtic</span>
</td>
<td class="cell_sb part-top">
<span class="icons">
<span class="live-centre">
</span>
</span>
</td>
<td class="cell_ia icons">
<span class="icons">
<span class="tv icon1">
</span>
</span>
</td>
<td class="cell_oq comparison" title="">
<span class="icons" title="">
<span class="slive icon0 xxx" title="This match will be available for LIVE betting!">
</span>
</span>
</td>
</tr>
</tbody>

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>