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>
Related
I am also using socket.io. There is an HTML table, and when a user clicks a button, my code is supposed to replace that table with a new one, however it gives the error message in the title.
Here is my code:
HTML:
<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
JQuery script:
socket.on('resetGranted', function() {
$('table').replaceWith('<table> //says error is here
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>');
})
How do I fix this?
Use backtick ` for multiline string
console.log(`
multi
line
string
here
`);
socket.on('resetGranted', function() {
var htmlContent='<table>
</tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>';
$('table').replaceWith(htmlContent);
})
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
This is how my page looks like:
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
I would like to store the tables with class name bgLtTable. These table can appear up to 3-4 times in this page. Is it possible to get the specific table using the div above it? Something like:
var tableAddress = div.innerHtml="Customer Addresses".table.bgLtTable;
var tableMembers = div.innerHtml="Family Members".table.bgLtTable;
Maybe try to use document.getElementsByTagName("TABLE");
This will give you an object that is accessible via index
You can then assign those elements to a variable and loop through it but look where the class attribute is equal to className for example
var element = document.getElementsByTagName("TABLE");
for (var i = 0; element.length > i; i++)
{
var elementClass = element[i].getAttribute('class');
}
I am not 100% sure this answers your question how I understand is you just want to get the class.
I hope this helps I am also pretty new to coding but always willing to help if I can.
var CustomerAddressesTable = $('div.smTitle:contains("Customer Addresses")').next('.bgLtTable');
console.log($("<div />").append($(CustomerAddressesTable).clone()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="prnt">
<td>
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
</td>
</tr>
<tr class="prnt">
<td colspan="3">
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
</td>
</tr>
</table>
This method will give you the html of the required table.
I have the following format for an html table (modified a bit to post here)...
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="14">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="8">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
I am using the following JavaScript to collapse rows that have the class of 'child' from the parent class...
<script>
$(document).ready(function () {
function getChildren($row) {
var children = [];
while ($row.next().hasClass('child')){
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function () {
var children = getChildren($(this));
$.each(children, function () {
$(this).toggle();
})
});
})
</script>
However, it is only getting the first row...how can I get all rows to collapse until i reach the next parent class?
Assuming that the actual rowspan values are not correct in your example (they have too large values), this could be a solution (I corrected those values in the sample table):
$(document).ready(function () {
$('.parent').on('click', function () {
var $row = $(this).parent();
var rowspan = +$(this).attr('rowspan') || 1;
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.child').toggle();
});
});
.table-style, th, td { border: 1px solid }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="4">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="2">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
Try jQuery nextUntil() function. Pass in the parent class and you'll get the results you're looking for.
https://api.jquery.com/nextUntil/
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