Button content closes on click of next button - javascript

I have two buttons which store tables, but I want the table to disappear on click of the second button and show the contents of the second button immediately after clicking it, rather than clicking it twice (first click hides the table from the previous button, next clicks opens table from the current button).I don't seem to know how to do that.
function myFunction2() {
var x = document.getElementById("displaytable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<input type="button" id="Button1" value="Button1" onClick="myFunction2()" />
<div id="displaytable" style="display:none">
<table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>
<input type="button" id="Button2" value="Button1" onClick="myFunction2()" />
<div id="displaytable" style="display:none">
<table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">36</td>
<td align="center">45</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>

You will have to make the following updates:
You cannot have elements with same id as you had with your button and divs. See the modifications, I renamed them as displaytable1 , 2 and so on.
This code works even if you have multiple number of buttons and its corresponding tables (10,20 or even 100). You don't have to make a seperate function for each button click and can run a loop, so when you click 1 button it will just open that table and close all the remaining tables in this line:
for(i=1;i<=2;++i) where '2' is the last table id index and likewise the maximum id of a table as displaytable2.
The function gets a parameter which is an integer, depending on the serial id of the button or the corresponding table that is, 1 for the first, 2 for the second like demonstrated in the code.
You might want to get all your buttons lined up together separately and the tables separately like shown below so when a button is clicked, the rest of the buttons don't go down below the table.
function myFunction2(index) {
var x = document.getElementById("displaytable"+index);
for(i=1;i<=3;++i) //3 because we have 3 tables
{
if(index==i){
x.style.display = "block";
}
else{
document.getElementById("displaytable"+i).style.display = "none";
}
}
}
<input type="button" id="Button1" value="Button1" onClick="myFunction2('1')" />
<input type="button" id="Button2" value="Button2" onClick="myFunction2('2')" />
<input type="button" id="Button3" value="Button3" onClick="myFunction2('3')" />
<div id="displaytable1" style="display:none">
<table width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>
<div id="displaytable2" style="display:none">
<table width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column2</td>
<td class="lbl">column4</td>
<td class="lbl">column5</td>
</tr>
<tr>
<td align="center">36</td>
<td align="center">45</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>
<div id="displaytable3" style="display:none">
<table width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column11</td>
<td class="lbl">column23</td>
<td class="lbl">column2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">45</td>
<td align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">00</td>
<td align="center">6</td>
</tr>
</table>
</div>

You used an id in multiple times that is completely wrong, you most use classes instead or use unique ids. BTW you used an id 4th times and this will puts you in trouble when you are using JS and its not standard coding.
JS:
function myFunction1() {
var x = document.getElementById("displaytable1");
var y = document.getElementById("displaytable2");
y.style.display = "none";
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("displaytable2");
var y = document.getElementById("displaytable1");
y.style.display = "none";
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
HTML:
<input type="button" id="Button1" value="Button1" onClick="myFunction1()"/>
<div id="displaytable1" style="display:none">
<table id="displaytable1_1" width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>
<input type="button" id="Button2" value="Button1" onClick="myFunction2()"/>
<div id="displaytable2" style="display:none">
<table id="displaytable2_2" width="100%" cellpadding="1" cellspacing="0" border="3">
<tr align="center">
<td class="lbl">column1</td>
<td class="lbl">column2</td>
<td class="lbl">column3</td>
</tr>
<tr>
<td align="center">36</td>
<td align="center">45</td>
<td align="center">33</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
</tr>
</table>
</div>
P.S: i made changes as follow:
convert id from displaytable to displaytable1 for first div element and
convert id from displaytable to displaytable2 for secound div that contains second table, and gave each table an unique ids. Regards

Related

How to grab a specific text value from a big text or html file [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would want to get only the path value form the below text/html. Actually it contains 10k lines, it would be very difficult to manually take the all path values. Is this possible to get the only path values through regex or through excel or any other possible way?
I would want to grab and take all the path value alone from the href attribute
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
In javascript, with .each, you can do something like that
$( "tr" ).each(function( index ) {
let ahref = $(this).find('a').attr('href');
console.log(ahref);
});
You can do either use JavaScript or jQuery both to achieve the results you are after.
Using jQuery way
You can use $.each along with href to get the a elements hrefs only from your table.
Also, to target the a only - We can use jQuery Descendant Selector like this below.
$("table tr > td > a").each(function(i, el) {
console.log(el.href) //get a href only
});
Live Demo:
$("table tr > td > a").each(function(i, el) {
console.log(el.href) //get a href only
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Using only Pure JavaScript way
You can use querySelectorAll method along with forEach method to get the href as well from the a
const el = document.querySelectorAll('table tr > td > a')
el.forEach(function(el, i) {
console.log(el.href) //get a href only
})
Live Demo:
const el = document.querySelectorAll('table tr > td > a')
el.forEach(function(el, i) {
console.log(el.href) //get a href only
})
<table>
<tbody>
<tr>
<th>account</th>
<th>size</th>
<th>nodes</th>
<th>props</th>
<th></th>
</tr>
<tr>
<td>course-products</td>
<td class="number">955MB</td>
<td class="number">80607</td>
<td class="number">549393</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:58%" class="bar"></td>
<td style="border: none; width:42%"><b>58%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>silverthorn-7e-info</td>
<td class="number">83.5MB</td>
<td class="number">149</td>
<td class="number">778</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:5%" class="bar"></td>
<td style="border: none; width:95%"><b>5%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>sanders-2e-info</td>
<td class="number">45.5MB</td>
<td class="number">9609</td>
<td class="number">67184</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:3%" class="bar"></td>
<td style="border: none; width:97%"><b>3%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>davidson-10e-info</td>
<td class="number">39MB</td>
<td class="number">53</td>
<td class="number">288</td>
<td width="100%">
<table style="border: none;" width="100%">
<tbody>
<tr>
<td style="border-width:1;width:2%" class="bar"></td>
<td style="border: none; width:98%"><b>2%</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

Show/hide table jsp jstl with Hashmap

I'm stuck!
I'll try to explain my problem:
i've to loop an hashmap, select one of the key's and "explode" details. The hashmap is HashMap<String, List<Object>>. I thinked about a onClick with JS script, but i'm not sure how get the index into the second loop to hide/visualize details.
I looked over the internet and on stackoverflow too, but i can't find a good example for me.
This is the JS code:
<script>
function mostraNascondiCiclo(indice)
{
var divNascosto = document.getElementById('presenzaRaggruppata'+indice);
if (divNascosto.style.display === 'none') {
divNascosto.style.display = 'block';
} else {
divNascosto.style.display = 'none';
}
return false;
}
</script>
........
JSP block:
<table cellpadding="2" cellspacing="1" border = "0" class="sfondotabella" width="60%">
<tr>
<td class="intestazionelista" width="1%" align="center"> </td>
<td class="intestazionelista" align="center">Causale</td>
<td class="intestazionelista" align="center" width="4%">Totale giorni</td>
<td class="intestazionelista" align="center" width="4%">Totale ore</td>
<td class="intestazionelista" align="center" width="4%">Totale minuti</td>
</tr>
<c:forEach var="presenza" items="${requestScope.mappaPresenzeProgrammate}" varStatus="loop">
<tr>
<td class="intestazione" width="1%">
<img src="images/add.png" alt="Espandi dettaglio presenza causale" title="Espandi dettaglio presenza causale ${presenza.key}" onclick="mostraNascondiCiclo(${loop.index})" border='0' height="16" width="16">
</td>
<td class="intestazione">
<c:out value="${presenza.key}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].giorniTotali}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].oreTotali}"/>
</td>
<td class="intestazione" width="4%">
<c:out value="${presenza.value[0].minutiTotali}"/>
</td>
<input type="hidden" id="idCiclo" value="getCategoryIndex(${loop.index})" />
</tr>
<c:forEach var="dettaglio" items="${presenza.value}">
<div> <!-- COMMENT FOR STACKOVERFLOW: i think must put index here somehow -->
<tr>
<td class="intestazionelista" width="1%" align="center"> </td>
<td class="intestazionelista" align="center">Richiesta da</td>
<td class="intestazionelista" align="center">Data<br/>pres.</td>
<td class="intestazionelista" align="center">Causale</td>
<td class="intestazionelista" align="center">Ora<br/>inizio</td>
<td class="intestazionelista" align="center">Ora<br/>fine</td>
<td class="intestazionelista" align="center">Qta<br/>rich.</td>
<td class="intestazionelista" align="center">Note<br/>rich.</td>
<td class="intestazionelista" align="center">Inviata a</td>
<td class="intestazionelista" align="center" style="border-left: 2px solid #185163">Stato</td>
<td class="intestazionelista" align="center">Data Autor./<br/>Rifiuto</td>
<td class="intestazionelista" align="center">Note<br/>Autor.</td>
<td class="intestazionelista" align="center" style="border-left: 2px solid #185163">Elab.</td>
<td class="intestazionelista" align="center">Qta<br/>eff.</td>
</tr>
<tr>
<td class="intestazione" width="1%">
<input type="radio" name="idPresenza" id="idPresenza_${idx}" value="${presenza.idPresenza}"/>
</td>
<td class="intestazione" align="left" style="white-space: nowrap">
${dettaglio.soggettoRichiedente.cognome} ${dettaglio.soggettoRichiedente.nome}
</td>
<td class="intestazione" align="center">
${dettaglio.dataPresenza}
</td>
<td class="intestazione" align="right" title="${dettaglio.causale.descrizione}">
${dettaglio.causale.codice}
</td>
<td class="intestazione" align="center">
${dettaglio.oraInizio}
</td>
....... blabla
</div>
</c:forEach>
I would by clicking with the onClick script, page displays only values ​​of the selected keyset and go on with others. (no oneway approach then).
Hope i'd explain my problem.
Thanks to anyone who will help me!!!
Resolved!
In the second table:
<table style="display: none;" id="entry_${loopKey.index}" cellpadding="2" cellspacing="1" border = "0" class="sfondotabella" width="80%">
JS:
function mostraNascondiCiclo(indice)
{
var divNascosto = document.getElementById(indice);
if (divNascosto.style.display === 'none') {
divNascosto.style.display = 'block';
} else {
divNascosto.style.display = 'none';
}
}

How to pass html div id's dynamically to js function

I want to pass the div id from html to a js script dynamically
as such div id r1,r2,r3 needs to be passed in to the getElementById() in jS,so when user mouse over any div,it will get rotated automatically.
This is my first Question,if any Corrections suggested are welcome!
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>
<script>
var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>
Edited my answer
<html>
<body>
<table>
<tbody>
<tr>
<td id="r1" onmouseover="rotate(this)"> Roboust</td>
<td id="r2" onmouseover="rotate(this)">Dynamic</td>
<td id="r3" onmouseover="rotate(this)">Adhere</td>
</tr>
<tr>
<td id="r4" onmouseover="rotate(this)">Popular</td>
<td id="r5" onmouseover="rotate(this)">Trending</td>
<td id="r6" onmouseover="rotate(this)">Favourite</td>
</tr>
<tr>
<td id="r7" onmouseover="rotate(this)">Famous</td>
<td id="r8" onmouseover="rotate(this)">Blockbouster</td>
<td id="r9" onmouseover="rotate(this)">Navie</td>
</tr>
</tbody>
</table>
<script>
var rotate = function(x) {
if(x.className == "rotated"){
x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "";
}
else{
x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "rotated";
}
}
</script>
</body>
</html>
you have several errors try it like this
<table>
<tr>
<td id="r1" onmouseover="rota(r1)"> Roboust</td>
<td id="r2" onmouseover="rota(r2)">Dynamic</td>
<td id="r3" onmouseover="rota(r3)">Adhere</td>
</tr>
</table>
<script>
function rota(i) {
var x = document.getElementById(i);
x.style.transform="rotateX(180deg)";
x.style.transition='0.6s';
}
</script>
</body>
You can also try this way -
<table id="myTable">
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<script>
document.getElementById('myTable').onmouseover = function(event) {
if (event.target.tagName.toUpperCase() == "TD") {
event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
}
</script>

Jquery using class in table get data for google dynamic remarketing tag

Im trying to pull out the data and put it in arrays with jquery for google dynamic remarketing tag.
using the css class
gr_row
values---
ecomm_prodid
ecomm_quantity
ecomm_totalvalue
Then insert them like so, if there are multiple values, if only one then no array and remove curreny symbol.
<!-multiple products in cart-->
<script type="text/javascript">
var google_tag_params =
ecomm_prodid: ["123","234"],
ecomm_pagetype: "basket",
ecomm_totalvalue: [100,50]
};
</script>
<!-single product in cart-->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 234,
ecomm_pagetype: "purchase",
ecomm_totalvalue: 120.99
};
</script>
Any help appreciated thanks
google instructions add dynamic remarketing tag
<table class="checkout-cart" border="0" cellpadding="3" cellspacing="2" width="650">
<tbody>
<tr>
<th "="" align="left" width="15%">REF</th>
<th align="left" width="45%">DESCRIPTION</th>
<th align="right" width="10%">QUANTITY</th>
<th align="right" width="10%">PRICE</th>
<th align="right" width="10%">COST</th>
<th align="center" width="10%">REMOVE</th>
</tr>
<tr class ="gr_row">
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="77"> 83 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="242">some product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_0" value="1" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td rowspan="1" class="cart" align="center"><input name="D_0" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="78"> 3571 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="241">another product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_1" value="5" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td class="cart" align="right"> £6.90 </td>
<td class="cart" align="right"> £6.90 </td>
<td rowspan="1" class="cart" align="center"><input name="D_1" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Subtotal</b></td>
<td class="cart" align="right">£12.69</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>VAT</b></td>
<td class="cart" align="right">£2.54</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td class="cartheading" align="right"><b>£15.23</b></td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
</tbody>
</table>

How to move table to the top of the DIV container based on a Condition with JQuery?

I have multiple tables stacked inside a div container as below:-
<div id="myContent" style="display: block;">
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Health Care
</td>
</tr>
<tr>
<td align="left">
20 Wisconsin Ave</td>
</tr>
<tr>
<td align="left">
641.235.5900
</td>
</tr>
<tr>
<td align="left">
No website
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table >
<tbody>
<tr>
<td align="left">Housing</td>
</tr>
<tr>
<td align="left">
N/A</td>
</tr>
<tr>
<td align="left">
641.255.3884
</td>
</tr>
<tr>
<td align="left">
www.housingl.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
<table id="myTable" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Employment</td>
</tr>
<tr>
<td align="left">N/A</td>
</tr>
<tr>
<td align="left">
641.743.0500
</td>
</tr>
<tr>
<td align="left">
http://www.noexperience.org
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" >
</td>
</tr>
</tbody>
</table>
</div>
I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:
Finding the text "N/A" and hiding an image in table's next TD
I have a starting trouble with this code. Any support is appreciated.
$('td:contains(N/A)').closest('table').prependTo('#myContent');
jsFiddle example
$('td').each(function(){
if ($(this).text() === 'N/A') {
$(this).parents('table').detach().prependTo('#myContent');
}
});

Categories