JavaScript html data table issue - javascript

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/

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>

JQuery: Uncaught SyntaxError: Invalid or unexpected token

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);
})

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.

You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

Aligning data vertically in td elements for horizontally connected rows using jquery

I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.

You can merely add the desired <td>s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
$(document).ready(function(){
$('.comps + .comps').remove();
$('.myTable tr').each(function(i) {
if (i > 0) {
$(this)
.append('<td>' + list1[i - 1] + '</td>')
.append('<td>' + list2[i - 1] + '</td>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table>.

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>

Categories