Custom function to limit selections is not working - javascript

I have a html form having 7 songs with checkboxes, Users can only select up to 5 songs. I created a js function to do this. It works nice if I go selecting songs and prevent selecting 6th song and show alert message.
But once I have selected 5 songs and try to deselect any song, it also prevent we to do so and show the same alert.
here is my HTML markup (sorry for the table layout this is my client's choice, he only want table even if I can do the same without the table)
<form id="apc-form" dir="rtl" method="post" action="ap-contact-form.php">
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</div>
<button id="submit" type="submit">שלח</button>
</form>
and JQuery codes
var apcSongs =
{
init: function() {
var sCheckbox = $('#apc-table .song-select');
var form = $('#apc-form');
form.submit(function(e) {
apcSongs.validateMin();
});
sCheckbox.click(function(e) {
var selectedSongs = $('#apc-table').find('tr.selected');
console.log(selectedSongs.length);
if (selectedSongs.length < 5) {
$(this).parent().parent().toggleClass('selected');
} else {
alert('You can\'t choose more than 5 songs');
return false
}
});
},
validateMin: function() {
var selectedSongs = $('#apc-table').find('tr.selected');
if (selectedSongs.length == 0)
{
alert('You must select at least 1 song');
return false
}
}
}
apcSongs.init();
You can check this jsbin
Please check my code and tell me what can I do with my codes so that it doesn't show alert on deselecting. If you know a batter way to do this please tell me.

When a checkbox is clicked, you need to check if it's checked. If it's checked, that means it's now being unchecked, and therefore you should let the user click.

In your js :
replace
if (selectedSongs.length < 5 ) {
by
if (selectedSongs.length < 5 || ! $(this).is(':checked')) {

You can use something likethis
<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input[type=checkbox][name=ck]").click(function() {
if( $("input[type=checkbox][name=ck]:checked").length > 5)
{
alert("You can select only 5");
$(this).prop('checked', false);
}
});
});
</script>
<body>
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</body>
</html>

Related

Letting another Table appear inside of an already existing Table via Button Click

I got an HTML Table with a Button on the left side.
What I would like to achieve is that by using the Button the Table splits below that row and another table with different columns and rows appears with the full width of the original table.. basically the new table pushes the rest of the original table down the page.
What would be a solid approach to this without using any big libraries/frameworks?
<table>
<tr>
<th></th>
<th>Lieferant</th>
<th>urspüngliches Lieferdatum</th>
<th>Liefer-ID</th>
</tr>
<tr class="new_tr verspaetet">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Müller GmbH</td>
<td>20.10.2022</td>
<td>12384123</td>
</tr>
<tr class="new_tr">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Wasser GmbH</td>
<td>heute</td>
<td>12385533</td>
</tr>
<tr class="new_tr">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Grill GmbH</td>
<td>heute</td>
<td>94728544</td>
</tr>
<tr class="new_tr">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Bier GmbH</td>
<td>heute</td>
<td>82375440</td>
</tr>
<tr class="new_tr">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Pflaumen GmbH</td>
<td>heute</td>
<td>52469874</td>
</tr>
<tr class="new_tr">
<td><input type="image" src="./img/down-arrow.png" /></td>
<td>Bananen GmbH</td>
<td>heute</td>
<td>16543897</td>
</tr>
</tr>
```
First, generate the inner table in a separate row of the table you have, and initially hide it. Something like:
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
The empty td serves to get a bit of indentation of the inner table. The colspan attribute ensures that the table occupies the remaining column space of the outer table.
Once you have those inner tables embedded in your HTML, you can add some JavaScript to respond to a click on the arrow cell. Give that arrow cell a specific class so a click on it can be easily recognised.
Here is how that looks:
const table = document.querySelector("table");
table.addEventListener("click", function (e) {
const td = e.target;
if (td.classList.contains("expander")) {
const style = td.parentNode.nextElementSibling.style;
const wasOpen = !style.display;
console.log(wasOpen);
style.display = wasOpen ? "none" : "";
td.textContent = wasOpen ? "▼" : "▲";
}
});
table { border-collapse: collapse }
th { background: silver; }
td, th { border: 1px solid; }
.new_tr > td:first-child { cursor: pointer }
td > table { width: 100% }
<table>
<tr>
<th></th>
<th>Lieferant</th>
<th>urspüngliches Lieferdatum</th>
<th>Liefer-ID</th>
</tr>
<tr class="new_tr verspaetet">
<td class="expander">▼</td>
<td>Müller GmbH</td>
<td>20.10.2022</td>
<td>12384123</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
<tr class="new_tr">
<td class="expander">▼</td>
<td>Wasser GmbH</td>
<td>heute</td>
<td>12385533</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
<tr class="new_tr">
<td class="expander">▼</td>
<td>Grill GmbH</td>
<td>heute</td>
<td>94728544</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
<tr class="new_tr">
<td class="expander">▼</td>
<td>Bier GmbH</td>
<td>heute</td>
<td>82375440</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
<tr class="new_tr">
<td class="expander">▼</td>
<td>Pflaumen GmbH</td>
<td>heute</td>
<td>52469874</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
<tr class="new_tr">
<td class="expander">▼</td>
<td>Bananen GmbH</td>
<td>heute</td>
<td>16543897</td>
</tr>
<tr style="display: none">
<td></td>
<td colspan="100"><table>
<tr><th>Other</th><th>Table</th><th>Comes</th><th>Here</th></tr>
<tr><td>12</td><td>123.33</td><td>green</td><td>99</td></tr>
<tr><td>13</td><td>387.41</td><td>red</td><td>87</td></tr>
<tr><td>14</td><td>277.10</td><td>blue</td><td>28</td></tr>
</table></td>
</tr>
</table>
Tables are not worth the hassle, learning display: grid will save you pain and time

Find text in table and smoothly scroll to that position on table and also highlight this row

I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.
Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color.
So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..
This page feature is specially required for mobile version so that user is scroll to the right position on page etc
https://codepen.io/KGuide/pen/jOyLWNR
//$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top);
//$(window).scrollTop($("*:contains('25-04-2021')").offset().top);
$(window).scrollTop($("*:contains('25-04-2021')"));
$("tr:contains('25-04-2021')" ).css( "color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-w ">
<table class="ramadan-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Date" data-label="Date">13-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">1</td>
</tr>
<tr>
<td class="Date" data-label="Date">14-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">2</td>
</tr>
<tr>
<td class="Date" data-label="Date">15-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">3</td>
</tr>
<tr>
<td class="Date" data-label="Date">16-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">4</td>
</tr>
<tr>
<td class="Date" data-label="Date">17-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">5</td>
</tr>
<tr>
<td class="Date" data-label="Date">18-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">6</td>
</tr>
<tr>
<td class="Date" data-label="Date">19-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">7</td>
</tr>
<tr>
<td class="Date" data-label="Date">20-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">8</td>
</tr>
<tr>
<td class="Date" data-label="Date">21-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">9</td>
</tr>
<tr>
<td class="Date" data-label="Date">22-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">10</td>
</tr>
<tr>
<td class="Date" data-label="Date">23-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">11</td>
</tr>
<tr>
<td class="Date" data-label="Date">24-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">12</td>
</tr>
<tr>
<td class="Date" data-label="Date">25-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">13</td>
</tr>
<tr>
<td class="Date" data-label="Date">26-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">14</td>
</tr>
<tr>
<td class="Date" data-label="Date">27-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">15</td>
</tr>
<tr>
<td class="Date" data-label="Date">28-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">16</td>
</tr>
<tr>
<td class="Date" data-label="Date">29-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">17</td>
</tr>
<tr>
<td class="Date" data-label="Date">30-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">18</td>
</tr>
<tr>
<td class="Date" data-label="Date">01-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">19</td>
</tr>
<tr>
<td class="Date" data-label="Date">02-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">20</td>
</tr>
<tr>
<td class="Date" data-label="Date">03-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">21</td>
</tr>
<tr>
<td class="Date" data-label="Date">04-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">22</td>
</tr>
<tr>
<td class="Date" data-label="Date">05-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">23</td>
</tr>
<tr>
<td class="Date" data-label="Date">06-05-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">24</td>
</tr>
<tr>
<td class="Date" data-label="Date">07-05-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">25</td>
</tr>
<tr>
<td class="Date" data-label="Date">08-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">26</td>
</tr>
<tr>
<td class="Date" data-label="Date">09-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">27</td>
</tr>
<tr>
<td class="Date" data-label="Date">10-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">28</td>
</tr>
<tr>
<td class="Date" data-label="Date">11-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">29</td>
</tr>
<tr>
<td class="Date" data-label="Date">12-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">30</td>
</tr>
</tbody>
</table>
</div>
Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);
Jquery scroll needs the offset of html tag.
Demo: https://jsfiddle.net/qtkwr7ny/

Hide entire row when input is checked

So far I am only finding solutions to this in Jquery, but I am trying to solve this in Javascript.
I want to check a box and hide the other cells in the row's text content.
Javascript:
var rowElements = document.getElementsByClassName('tr-checked'),
for (var i = 0; i < rowElements.length; i++ ) {
rowElements[i].addEventListener('click', function(e){
var clickedElement = e.target;
if ( clickedElement.nodeName === 'input' && clickedElement.checked === true ) {
// if the clicked element is an input element, and is checked, meaning it's a checkbox, do the following:
this.parent.children.textContent = "";
}
})
}
HTML:
<table>
<thead>
<tr>
<td></td>
<td class="column-a">Course 1</td>
<td class="column-b">Course 2</td>
<td class="column-c">Course 3</td>
</tr>
</thead>
<tbody>
<tr class="row-a tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 1</td>
<td class="column-b">Specification 1</td>
<td class="column-c">Specification 1</td>
</tr>
<tr class="row-b tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 2</td>
<td class="column-b">Specification 2</td>
<td class="column-c">Specification 2</td>
</tr>
<tr class="row-c tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 3</td>
<td class="column-b">Specification 3</td>
<td class="column-c">Specification 3</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
You can do it like this,
var rowElements = document.querySelectorAll('.tr-checked input[type="checkbox"]');
for (var i = 0; i < rowElements.length; i++) {
rowElements[i].addEventListener('change', function(e) {
var nextElement = this.parentElement.nextElementSibling;
while(nextElement) {
nextElement.style.display = this.checked ? "none" : "table-cell";
nextElement = nextElement.nextElementSibling;
}
});
}
DEMO
Here is my solution:
<table>
<thead>
<tr>
<td></td>
<td class="column-a">Course 1</td>
<td class="column-b">Course 2</td>
<td class="column-c">Course 3</td>
</tr>
</thead>
<tbody>
<tr class="row-a tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 1</td>
<td class="column-b">Specification 1</td>
<td class="column-c">Specification 1</td>
</tr>
<tr class="row-b tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 2</td>
<td class="column-b">Specification 2</td>
<td class="column-c">Specification 2</td>
</tr>
<tr class="row-c tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 3</td>
<td class="column-b">Specification 3</td>
<td class="column-c">Specification 3</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
Javascript
function say(v)
{
$(v.parentNode.parentNode).hide();
}

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