Hide and show on specific row? - javascript

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>

Related

HTML JavaScript document.getElementById

First, my English not very well when you read this post, I'm sorry.
Recently I met one problem, I try to get table ID from buttons send the ID to function do compare. And in the function, I have created an Array to stored the table ID. But I can't successfully compare Id used array or string.
Can somebody teach me how to solve or do this thing?
Here is my code
HTML:
HTML
JS:JavsScrpit
var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];
function displaySetting(id) {
/*var tabID = document.getElementById(id);*/
/*if(document.getElementById(id)==arrTabID[0])*/
if (document.getElementById(id) == "tSec1") {
if (document.getElementById(id).style.display == "none") {
doucment.getElementById(id).style.display == "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
/*if(document.getElementById(id)==arrTabID[1])*/
else if (document.getElementById(id) == "tSec2") {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id]).style.display = "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
/*if(document.getElementById(id)==arrTabID[2])*/
else if (document.getElementById(id) == "tSec3") {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
}
<table class="table-content">
<tbody>
<!--Section 1-->
<div>
<table id="tSec1" name="NtSec1" style="display:block;" height="450px">
<tbody>
<tr>
<td style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media1.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 1.</h3>
</td>
</tr>
<tr>
<td>
<h3> 2.</h3>
</td>
</tr>
<tr>
<td>
<h3> 3. </h3>
</td>
</tr>
<tr>
<td>
<h3> 4. </h3>
</td>
</tr>
<tr>
<td>
<h3> 5.</h3>
</td>
</tr>
<tr>
<td>
<h3>§.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 2-->
<div>
<table id="tSec2" name="NtSec2" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media2.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 6.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 7.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 8.</h3>
</td>
</tr>
<tr>
<td>
<h3>§ </h3>
</td>
</tr>
<tr>
<td>
<h3> 9.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 3-->
<div>
<table id="tSec3" name="NtSec3" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media3.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 10.</h3>
</td>
</tr>
<tr>
<td>
<h3> 11.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 12.</h3>
</td>
</tr>
<tr>
<td>
<h3> 13.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 4-->
<div>
<table id="tSec4" name="NtSec4" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media4.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 14.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 15.</h3>
</td>
</tr>
<tr>
<td>
<h3> 16.</h3>
</td>
</tr>
<tr>
<td>
<h3> 17.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 5-->
<div>
<table id="tSec5" name="NtSec5" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media5.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 18.</h3>
</td>
</tr>
<tr>
<td>
<h3> 19.</h3>
</td>
</tr>
<tr>
<td>
<h3> 20. </h3>
</td>
</tr>
<tr>
<td>
<h3> 21.</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 6-->
<div>
<table id="tSec6" name="NtSec6" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media6.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 22.</h3>
</td>
</tr>
<tr>
<td>
<h3> § </h3>
</td>
</tr>
<tr>
<td>
<h3> 23.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 24.</h3>
</td>
</tr>
<tr>
<td>
<h3> 25. </h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 7-->
<div>
<table id="tSec7" name="NtSec7" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media7.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 26.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 27.</h3>
</td>
</tr>
<tr>
<td>
<h3> 28.</h3>
</td>
</tr>
<tr>
<td>
<h3> 29.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>Page</h1>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button>
</div>
</tbody>
</table>
Thank you for your help. Best regard.

You compare an HTML object and a string.
if(document.getElementById(id)=="tSec1")
Use if(id == 'tSec1') instead.
And then there is a typo in
document.getElementById(id]).style.display = "block";
and your loops do nothing.
If you want the function to set display to block for an element with given id and set all other elements to display none you could do it like this:
var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];
function displaySetting(id) {
var tabID;
var index = arrTabID.indexOf(id); // index of given id in array arrTabID
for (var i = 0; i < arrTabID.length; i += 1) {
tabID = document.getElementById(arrTabID[i]); // for ids in arrTabID
if (i == index) {
tabID.style.display = 'block';
} else {
tabID.style.display = 'none';
}
}
}
<table class="table-content">
<tbody>
<!--Section 1-->
<div>
<table id="tSec1" name="NtSec1" style="display:block;" height="450px">
<tbody>
<tr>
<td style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media1.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 1.</h3>
</td>
</tr>
<tr>
<td>
<h3> 2.</h3>
</td>
</tr>
<tr>
<td>
<h3> 3. </h3>
</td>
</tr>
<tr>
<td>
<h3> 4. </h3>
</td>
</tr>
<tr>
<td>
<h3> 5.</h3>
</td>
</tr>
<tr>
<td>
<h3>§.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 2-->
<div>
<table id="tSec2" name="NtSec2" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media2.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 6.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 7.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 8.</h3>
</td>
</tr>
<tr>
<td>
<h3>§ </h3>
</td>
</tr>
<tr>
<td>
<h3> 9.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 3-->
<div>
<table id="tSec3" name="NtSec3" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media3.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 10.</h3>
</td>
</tr>
<tr>
<td>
<h3> 11.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 12.</h3>
</td>
</tr>
<tr>
<td>
<h3> 13.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 4-->
<div>
<table id="tSec4" name="NtSec4" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media4.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 14.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 15.</h3>
</td>
</tr>
<tr>
<td>
<h3> 16.</h3>
</td>
</tr>
<tr>
<td>
<h3> 17.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 5-->
<div>
<table id="tSec5" name="NtSec5" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media5.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 18.</h3>
</td>
</tr>
<tr>
<td>
<h3> 19.</h3>
</td>
</tr>
<tr>
<td>
<h3> 20. </h3>
</td>
</tr>
<tr>
<td>
<h3> 21.</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 6-->
<div>
<table id="tSec6" name="NtSec6" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media6.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 22.</h3>
</td>
</tr>
<tr>
<td>
<h3> § </h3>
</td>
</tr>
<tr>
<td>
<h3> 23.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 24.</h3>
</td>
</tr>
<tr>
<td>
<h3> 25. </h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 7-->
<div>
<table id="tSec7" name="NtSec7" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media7.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 26.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 27.</h3>
</td>
</tr>
<tr>
<td>
<h3> 28.</h3>
</td>
</tr>
<tr>
<td>
<h3> 29.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>Page</h1>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button>
</div>
</tbody>
</table>

What I get from your post is.. you are trying to search in array of table id's, if exist you want to perform some action
you can do this by code given below.
var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];
function displaySetting(id) {
var tabID = document.getElementById(id);
debugger
if (id == arrTabID.find(x=>x==id)) {
if (tabID.style.display == "none") {
tabID.style.display == "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
tabID.style.display = "none";
}
}
} else {
tabID.style.display = "block";
}
}
}

Regex on Javascript not working

I do a curl to a server to get the html data which I want to parse and store in a array.
I got this data
https://pastebin.com/7QB9BNut
Can anyone help me with regex to get and store the above data in array in this format.
[
["id","name","ip:port","map"]
]
example:
[
["1","Forever United","109.70.149.161:10480","Red Library Offices"],
["2","{KGB}Laura & Guns FuNHoUsE","63.141.226.61:9480","A-Bomb
Nightclub"],
and so on
]
Thanks

PasteBin wouldn't let me do an AJAX request because CORS so I had to dump the HTML in the script. But it seems to work.
let htmlString = `<tr>
<td>
1.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/109.70.149.161:10480/">
Forever United
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=109.70.149.161&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/18
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">109.70.149.161</span><span class="port">:10480</span>
</td>
<td>
Red Library Offices
</td>
</tr>
<tr>
<td>
2.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/63.141.226.61:9480/">
{KGB}Laura & Guns FuNHoUsE
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=63.141.226.61&port=9480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/US/">
<img src="/images/flags/us.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">63.141.226.61</span><span class="port">:9480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>
<tr>
<td>
3.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/163.172.55.136:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=163.172.55.136&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/FR/">
<img src="/images/flags/fr.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">163.172.55.136</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
4.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/51.15.152.220:10480/">
-==MYT Team Svr==-
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=51.15.152.220&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
16/16
</td>
<td>
</td>
<td>
<a href="/search/swat4/GB/">
<img src="/images/flags/gb.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">51.15.152.220</span><span class="port">:10480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
5.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/31.186.250.32:10480/">
WWW.KNIGHTofSORROW.IN (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.32&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
0/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/DE/">
<img src="/images/flags/de.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.32</span><span class="port">:10480</span>
</td>
<td>
Food Wall Restaurant
</td>
</tr>
<tr>
<td>
6.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/158.58.173.64:16480/">
|SoH| Shadow Of Heroes
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=158.58.173.64&port=16480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
12/14
</td>
<td>
</td>
<td>
<a href="/search/swat4/IT/">
<img src="/images/flags/it.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">158.58.173.64</span><span class="port">:16480</span>
</td>
<td>
Children of Taronne Tenement
</td>
</tr>
<tr>
<td>
7.
</td>
<td>
<a href="/search/swat4/">
<img src="/images/game_icons16/swat4.png" alt="SWAT4"/>
</a>
</td>
<td>
<a class="c03serverlink" href="/server_info/houseofpain.tk:10480/">
WWW.HOUSEOFPAiN.TK (Antics)
</a>
<a href="javascript:showPopupExternalLink('gt://joinGame:game=swat4&ip=31.186.250.156&port=10480');">
<img src="/images/global/btn_join.png" alt="Join"/>
</a>
</td>
<td>
10/12
</td>
<td>
</td>
<td>
<a href="/search/swat4/NL/">
<img src="/images/flags/nl.gif" alt="" class="item_16x11"/>
</a>
</td>
<td>
<span class="ip">31.186.250.156</span><span class="port">:10480</span>
</td>
<td>
A-Bomb Nightclub
</td>
</tr>`;
let html = document.createElement('table');
html.innerHTML = htmlString;
let results = Array.from(html.querySelectorAll('tr')).map(row => Array.from(row.querySelectorAll('td')).map(cell => cell.innerText.trim()).filter(data => data != ''));
console.log(results);

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>

Change text of button inside grid and disable other buttons in column using Javascript or JQuery

I have a grid and button inside a template field like following:
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" />
</ItemTemplate>
</asp:TemplateField>
I want to change text of button from "Map Route" to "Unmap Route" when user click on it and I also want to disable all buttons in other rows of this column using Javascript or JQuery
EDIT:
If above is not possible then only changing text of button which is clicked.
Edit2: HTML
<table cellspacing="0" cellpadding="3" rules="all" border="1" id="gvRider" style="border-color: White;
border-width: 1px; border-style: Solid; width: 100%; border-collapse: collapse;">
<tr class="gridtitlebg" align="left" style="height: 35px;">
<th align="center" scope="col">
#
</th>
<th scope="col">
Dist From Start (mi)
</th>
<th scope="col">
Start
</th>
<th scope="col">
Dist From End (mi)
</th>
<th scope="col">
Return
</th>
<th scope="col">
Commuting Days
</th>
<th scope="col">
Male/Female
</th>
<th scope="col">
Smoker/Non-Smoker
</th>
<th scope="col">
Drive/Non-Drive
</th>
<th scope="col">
Bike-Buddy
</th>
<th scope="col">
Email
</th>
<th scope="col" style="width: 30px;">
Map Route
</th>
</tr>
<tr class="grdtext1" align="left" style="background-color: White; height: 30px;">
<td align="center" style="width: 20px;">
1
</td>
<td align="center" style="width: 70px;">
0.73
</td>
<td align="center" style="width: 50px;">
08:20 AM
</td>
<td align="center" style="width: 70px;">
</td>
<td align="center" style="width: 50px;">
07:05 PM
</td>
<td align="left" style="width: 110px;">
<table cellspacing="9" border="0" style="width: 100%;">
<tr>
<td>
<img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/th.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Smoker" src="../Images/icons/filter/icon_smoker.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Not-Driver" src="../Images/icons/filter/noncar_icon.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 54px;">
<input type="image" name="gvRider$ctl02$imgBtnEmail" id="gvRider_ctl02_imgBtnEmail"
title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
</td>
<td>
<input type="button" value="Map Route" onclick="MapRoute('0')" />
</td>
</tr>
<tr class="grdtext1" align="left" style="background-color: #D2E8F9; height: 30px;">
<td align="center" style="width: 20px;">
2
</td>
<td align="center" style="width: 70px;">
0.94
</td>
<td align="center" style="width: 50px;">
05:25 AM
</td>
<td align="center" style="width: 70px;">
1.05
</td>
<td align="center" style="width: 50px;">
02:20 PM
</td>
<td align="left" style="width: 110px;">
<table cellspacing="9" border="0" style="width: 100%;">
<tr>
<td>
<img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/th.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Non-smoker" src="../Images/icons/filter/icon_nonsmoker.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Driver" src="../Images/icons/filter/icon_carpool.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 54px;">
<input type="image" name="gvRider$ctl03$imgBtnEmail" id="gvRider_ctl03_imgBtnEmail"
title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
</td>
<td>
<input type="button" value="Map Route" onclick="MapRoute('1')" />
</td>
</tr>
</table>
Thanks!

This seems to work well for me:
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" class="map-button" />
</ItemTemplate>
</asp:TemplateField>
Note: Added "map-button" to class attribute.
<script type="text/javascript">
var mapOpen = false;
$(function () {
$('.map-button').on('click', function () {
if(mapOpen) {
$('.map-button').removeAttr('disabled');
$(this).val('Map Route');
mapOpen = false;
}
else {
$('.map-button').attr('disabled', 'disabled');
$(this).val('Unmap Route').removeAttr('disabled');
mapOpen = true;
}
});
});​
</script>

You can use CSS to create a class for the button elements that you want to hide and then have your JQuery function toggle those elements to another class where they are hidden.
$("#button_id").click(function () {
$(".buttons_to_hide_class").toggleClass("hidden");
$(this).text() = "UnMap Route"; // Not sure if this is right. The rest should be.
return false;
});
CSS:
button.buttons_to_hide_class{
//Fill in how you want them to look
}
button.buttons_to_hide_class.hidden{
display:none;
visibility:hidden;
}

Check out this jsFiddle. http://jsfiddle.net/bngHu/
I set it up to disable all the button in that same row and column as the button that is clicked (including the button itself).
HTML...
<table>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
</table>
​
JQuery...
$(document).ready(function(){
$('.map-button').click(function(e){
$(this).val('Unmap Route');
$(this).parent().parent().find(".map-button").attr('disabled', 'disabled');
var col = $(this).parent().parent().children().index($(this).parent());
$.each($('tr'), function() {
$(this).find('td:nth(' + col + ')').find('.map-button').attr('disabled', 'disabled');
});
});
});​

Removing divs with jquery

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

Categories

Resources