I have the following function. I am trying to remove all <img> tags and only the second row from table that is inside this data. The code and selectors work fine in console but I don't get the result in data variable after replacing all things.
function fetchDetails(URLToRead, email) {
$.get(URLToRead, function (data) {
console.log(data);
var imgTags = $(data).find('img');
$.each(imgTags, function (i,v) {
$(v).remove();
});
$(data).find('table tr:nth-child(2)').remove();
console.log(data);
});
}
URLToRead content:
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
The problem is that .remove() works on elements that are in the DOM. Your data is never added to the DOM.
You can create a div with display: none and then perform the needed operations to it:
let data = `
<TABLE>
<TR>
<TD>
<span></span>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD ><span ></TD>
</TR>
<TR>
<TD height="12" colSpan="4"><IMG src="../images/spacer.gif" width="20" height="7"></TD>
</TR>
</TABLE>
`
let tempDiv = $("<div style='display: none;'></div>")
$("body").append(tempDiv)
$(tempDiv).append(data)
$(tempDiv).find('img').remove();
$(tempDiv).find('table tr:nth-child(2)').remove();
console.log($(tempDiv).html())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery
You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
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>
update: almost done! problem is that the productrow im trying to grouop gets divided into two groups: https://jsfiddle.net/g3zrh5y5/1/
I have a HTML table that I would like to convert and group to divs. I have dont his succesfully with tableanarchy.js (http://codepen.io/KurtWM/pen/AJpEw) on another table on my site, but on this table the setup is a bit different and I cant make it to work.
I need to remove the divider table row, and group the rest in divs as the example shows. Any idea how I do this?
<tbody>
<tr>
<td class="unfoldedlabel" colspan="6"><a href="javascript://" name=
"_ec_pd6_cc/cL" id="_ec_pd6_cc/cL" onclick=
"if( UI.pb_boolean(this, 'click') ) {} return false;">Backup/datalagring/Raid
Controllers</a></td>
</tr>
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (1GB)</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534562-B21</td>
<td>HP</td>
<td>0</td>
<td>4 127,97SEK</td>
<td><input type="button" id="rpb13804" class="actionbutton" value="KÖP NU"
onclick="buy(this, 13804, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
//remove this ---->
<tr>
<td class="divider" colspan="6"></td>
</tr>
//end remove ---->
//group this ---->
<tr>
<td rowspan="2"><a href=
"">
<img src="/imgs/9248a5f8-1a45-40c1-b254-52ab24881150/40/40" alt="" /></a></td>
<td colspan="3"><a href=
"">
HP Flash Backed Write Cache - RAID controller cache memory (512MB) - for ProLiant
BL460c G7, BL620C G7, BL680c G7, DL165 G7, DL360 G7, DL370 G6, DL980 G7, ML110
G7</a></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>534916-B21</td>
<td>HP</td>
<td>0</td>
<td>3 260,99SEK</td>
<td><input type="button" id="rpb28314" class="actionbutton" value="KÖP NU"
onclick="buy(this, 28314, null, null,null, '/ajax/buy')" /></td>
</tr>
//end group ---->
</tbody>
Just iterate the table rows and exclude the rows you don't need. Here is a working fiddle
$(document).ready(function(){
$('.group-btn').click(function(){
// Lets create the main div
var div = $('<div />', {id: '#myDiv', class: 'new-div'});
// Let's start iterating the body rows
$('.myTable tbody tr').each(function(index, row) {
// Exclude divider rows
if(!$(row).hasClass('divider')) {
// Let's iterate the columns of the row
$(row).find('td').each(function(index, column){
// This is a simple example that extract the column text that's why i create a simple <p> tag
// Let's exclude tds that have "exclude" class
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
});
}
});
// And finally we append the div to the "append-here" div
$('.append-here').append(div)
});
});
table {
border: 1px solid black
}
table tr td{
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="group-btn">Click me!</button>
<table class="myTable">
<thead>
<tr>
<th>col 1-1</th>
<th>col 2-1</th>
<th>col 3-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1-2</td>
<td class="exclude">Val 2-2</td>
<td>Val 3-2</td>
</tr>
<tr>
<td>Val 1-3</td>
<td>Val 2-3</td>
<td class="exclude">Val 3-3</td>
</tr>
<tr class="divider">
<td colspan="3">DIVIDER</td>
</tr>
<tr>
<td>Val 1-5</td>
<td>Val 2-5</td>
<td>Val 3-5</td>
</tr>
</tbody>
</table>
<div class="append-here">
<p>Here is where you append the divs</p>
</div>
I've made a little change: the "divider" class is in the tr and not in the td
* UPDATE *
I've added this line of code
if(!$(column).hasClass('exclude')) {
var paragraph = $(column).html();
$(div).append(paragraph).append('<br/>');
}
That permits you to check whatever class you need to check in order to include/exclude tds elements
I'm trying to sort tr but I've no luck by far.
Here is my tr structure.
<tr>
<td>
<a href="./BlueSky-TexasHealthResources/index.php" >Blue Sky-Texas</a>
</td>
<td>
View Data
</td>
<td id="blue_sky_texas">
</td>
</tr>
<tr>
<td id = 'bj'>
<a href="./BountyJobs/index.php" >Bounty Jobs</a>
</td>
<td>
View Data
</td>
</tr>
Here is Javascript that I've tried by far.
<script type="text/javascript">
var $tr = $("tr");
$(document).ready(function () {
var alphabeticallyOrderedTr = $tr.sort(function (a, b) {
return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());
});
$("#container").html(alphabeticallyOrderedTr);
});
</script>
And below is the image for table (unsorted using above code :( ).
.sort() is Array.prototyope method, not jQuery method. Try adding .get() or .toArray() before .sort(function(){}) called ; e.g., $tr.get().sort(
$(document).ready(function() {
var $tr = $("tr");
var alphabeticallyOrderedTr = $tr.get().sort(function(a, b) {
return $(a).find("a:first").text().toLowerCase().localeCompare($(b).find("a:first").text().toLowerCase());
});
$("#container").append(alphabeticallyOrderedTr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="container">
<tr>
<td>
<a>Y Jobs</a>
</td>
</tr>
<tr>
<td>
<a>Z Jobs</a>
</td>
</tr>
<tr>
<td id='bj'>
Bounty Jobs
</td>
<td>
View Data
</td>
</tr>
<tr>
<td>
<a>X Jobs</a>
</td>
</tr>
<tr>
<td>
Blue Sky-Texas
</td>
<td>
View Data
</td>
<td id="blue_sky_texas">
</td>
</tr>
</table>
I was planning on making a personal project with JavaScript until I encountered a problem. I have a table that's "Invisible" with css "style.display=none" but when I try to make it "visible" I get "Uncaught TypeError: Cannot read property 'style' of null".
JavaScript Code below:
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
HTML below:
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td id="message" colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
Demo FIDDLE
HTML
<body onload="disappear()">
<table border="1" >
<tr>
<td><img id="SHP" src="Hp/HPSlayerzach/hp2.png"/></td>
<td></td>
<td><img src="characters/slayerzach/slayerzach.png"/></td>
</tr>
<tr>
<td><p id="demo"></p></td>
<td ><img id="att" src="backgrounds/spacer1.png"/></td>
<td></td>
</tr>
<tr>
<td><img align="right" src="characters/fighterdan13/fighterDan13.gif"/></td>
<td></td>
<td><img id="FHP" src="hp/HPFighterdan13/hp1.png"/></td>
</tr>
<tr>
<td colspan="2" background="backgrounds/backgroundText.png">
<center><table border="0" id="list">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table></center>
<div id="message"></div>
</td>
<td>
<center><table border="0" background="backgrounds/backgroundmenu.png">
<tr>
<td><button id="butAtt" onclick="attack()">Attack</button></td>
<td><button id="butItems" disabled>Items</button></td>
</tr>
<tr>
<td colspan="2"><center><button id="butRun" style="width:110px; height:25px;" disabled>Run</button><center></td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
CODE
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
function fire(){
var y=document.getElementById("message");
var x=document.getElementById("demo");
var z=document.getElementById("att");
x.innerHTML=3;
}
function disappear(){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}
Problem was you replace the message innerhtml on disappear.it remove the table which have id list.so i create div with id message inside the td and remove message id from the td.
The error is with 'document.getElementById("message").innerHTML="";'.There is no element by Id 'message'.Remove it,it works perfectly
The other best practice is to always check whether the element exists in the DOM:
something like below:
if(document.getElementById("message")){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared</center>";
}
try dont use display:none through Javascript but from css, here is the example from your code i modify it a bit on link below
HTML Code
<body>
<td id="message" colspan="2" background="backgrounds/backgroundText.png" >
<table border="0" id="list" style="display:none;">
<tr>
<td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">FIRE</a></center></td>
<td style="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td>
</tr>
<tr>
<td style="font-family:verdana;font-size:15px"><center>WATER</center></td>
<td style="font-family:verdana;font-size:15px"><center>EARTH</center></td>
</tr>
</table>
<button id="butAtt" onclick="attack()">Attack</button>
Javascript
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
jsfiddle