I need a valid code for my blog(blogger) to get Title of YouTube video using the following string:
"http://gdata.youtube.com/feeds/api/videos/EDV-KMBvMck?v=2&alt=json&prettyprint=true"
(This string works well in Internet Explorer)
I have gone through various method found here, but no result are displaying.
I would like to display the titles of the videos within td tag.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table#t01 {
width: 100%;
}
table#t01,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<div>
<table id="t01">
<col style="width:50%;">
<col style="width:50%;">
<tr>
<td>
<img src="https://img.youtube.com/vi/EDV-KMBvMck/default.jpg"" alt="YouTube Icon">
</td>
<td>
<script>
$Video_Id = 'EDV-KMBvMck'
$.getJSON("http://gdata.youtube.com/feeds/api/videos/{$Video_Id}?v=2&alt=json&prettyprint=true", function(json) {
console.log("success");
var items = [];
$.each(json. {
$Video_Id
}, function(key1, val1) {
$Value = val1.key + val1.val
});
echo $Value
})
.done(function() {
console.log("second success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
})
.error(function(error) {
console.log(error);
});
</script>
</td>
</tr>
<tr>
<td>
<img src="https://img.youtube.com/vi/yXL7dT7ovEM/default.jpg"" alt="YouTube Icon">
</td>
<td>
<script>
$Video_Id = 'yXL7dT7ovEM'
$.getJSON("http://gdata.youtube.com/feeds/api/videos/{$Video_ID}?v=2&alt=json&prettyprint=true", function(json) {
console.log("success");
var items = [];
$.each(json. {
$Video_Id
}, function(key1, val1) {
$Value = val1.key + val1.val
});
echo $Value
})
.done(function() {
console.log("second success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
})
.error(function(error) {
console.log(error);
});
</script>
</td>
</tr>
</table>
</div>
</body>
</html>
I would like a function in header which will call from td tag at every change of Video_Id.
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo" frameborder="0" allowFullScreen></iframe>
paste it into your page and make necessary changes. It works in Firefox, MSIE, Chrome, Opera and just about any new browser out there.
Related
I'm trying to center a card on the page and center the text within that card. Here is the CSS I've attempted below. And It seems to do nothing. I am trying to use JS for the first time with CSS. Confusion about where I'm messing up, so not entirely sure what part to isolate to share.
sample here: https://rrrhhhhhhhhh.github.io/sentences/
Thank you
CSS
.testclass {
font: 10px courier, courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {
position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {
position: relative;
align: center;
}
html and js
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</body>
</html>
Just notice this without js
.testclass {
font: 10px courier,courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {position: relative;
align: center;
}
.center-div{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<!Doctype html>
<html>
<head>
<title>Robert Grenier - Sentences</title>
</head>
<body>
<div class="center-div">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</div>
</body>
</html>
I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only
Trying to run a function in a clientside controller file using ng-click on a button in my HTML. Getting nothing and not sure why. All help appreciated.
HTML
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="criminals in criminals.criminalArray">
<strong>{{criminals.name}}</strong> <em>{{criminals.location}}</em>
<span class="status {{criminals.status}}">{{criminals.status}}</span>
<button ng-click="criminals.criminalsDelete(criminal)" class="delete">X</button>
</li>
</ul>
CONTROLLER
vm.criminalsDelete = criminalsDelete;
function criminalsDelete(criminal) {
console.log('ng-click');
$http.delete(`http://localhost:4000/api/criminals/${criminal.id}`)
.then(() => {
const index = vm.criminalArray.indexOf(criminal);
vm.criminalArray.splice(index, 1);
});
}
The criminals name for the controllerAs syntax is being hidden by the criminals name for the ng-repeat iterator. Use something else for the iterator:
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="perp ̶c̶r̶i̶m̶i̶n̶a̶l̶s̶ in criminals.criminalArray">
<strong>{{perp.name}}</strong> <em>{{perp.location}}</em>
<span class="status {{perp.status}}">{{perp.status}}</span>
<button ng-click="criminals.criminalsDelete(perp)" class="delete">X</button>
</li>
</ul>
This form of code the controller for delete is best
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
I made a Complete CRUD for you for an example, you only have to put the http services.
See the snippet below.
angular.module('App', []).controller('CrudCriminal', ['$scope',
function($scope) {
$scope.Criminals = [
{
name : "walter",
location : "abq",
status : "dead",
editable : false
},
{
name : "Jesse",
location : "nebraska",
status : "out",
editable : false
}
];
$scope.entity = {}
$scope.edit = function(index){
$scope.entity = $scope.Criminals[index];
$scope.entity.index = index;
$scope.entity.editable = true;
}
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
$scope.save = function(index){
$scope.Criminals[index].editable = false;
}
$scope.add = function(){
$scope.Criminals.push({
name : "",
location : "",
status : "",
editable : true
})
}
}
]);
/* Styles go here */
body{
margin:10px;
font-size:14px;
font-family:Arial;
}
table{
border:1px solid #333;
border-collapse:collapse;
width:100%;
}
table tr td{
border:1px solid #333;
padding:10px;
}
table tr td span{
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App">
<div ng-controller="CrudCriminal">
<h1>Infamous Criminals</h1>
<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Status</td>
<td><span ng-click="add()">Add New</span></td>
</tr>
<tr ng-repeat="criminal in Criminals">
<td>
<input type="text" ng-model="criminal.name" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.name }}</span>
</td>
<td>
<input type="text" ng-model="criminal.location" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.location }}</span>
</td>
<td>
<input type="text" ng-model="criminal.status" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.status }}</span>
</td>
<td>
<span ng-click="edit($index)" ng-hide="criminal.editable">Edit</span>
<span ng-click="save($index)" ng-show="criminal.editable">Save</span>
<span ng-click="delete($index)"> | Delete</span>
</td>
</tr>
</table>
</div>
</body>
</html>
I have a Sitecore 7 site that has a SurveyMonkey popup invitation form embedded on a subpage. I noticed that in Chrome, FireFox, and Safari that the form isn't automatically appearing when I visit that particular page. If I leave the page and came back (like literally hit the back button in the browser) then the form would appear. I don't see any errors in the dev console to indicate anything may be wrong.
The odd thing is that the form appears automatically on the subpage if I'm in IE--no problems at all.
I tried looking around on Survey Monkey for any troubleshooting tips but couldn't find anything related to this issue, nor could I find anything in a Google search that was helpful.
Has anyone experienced this with Survey Monkey before? This is very frustrating as I can't see any reason why the popup would not be working consistently in 3 major browsers.
For reference, here is the embed code:
<%# Control Language="c#" AutoEventWireup="true" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" Inherits="Layouts.Testproductdetails.TestproductdetailsSublayout" CodeFile="~/layouts/Test/testProductDetails.ascx.cs" %>
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
<div class="subpage-subheading">Redacted</div>
<div class="subpage-header Item-No">
<sc:Text runat="server" ID="ProductNO" />
</div>
<div class="subpage-product-right-mobile clearfix">
<sc:Image runat="server" ID="FullSizeImage" CssClass="ProductTypeImage" />
<div class="subpage-product-right-img-lbl-mobile">
<sc:Text runat="server" ID="ProductNoSmallMobile" />
</div>
</div>
<div class="subpage-left-content-block">
<sc:Text runat="server" ID="Description" />
<asp:HyperLink runat="server" Visible="false" ID="ShopOnline" target="_blank" class="Shop-Btn">
Shop Online
</asp:HyperLink>
Request Info
</div>
<div class="subpage-product-right">
<sc:FieldRenderer ID="ProductImage" runat="server" CssClass="categoryImage" />
<div class="subpage-product-right-img-lbl">
<sc:Text runat="server" ID="ProductNoSmall" />
</div>
</div>
<div class="product-detail-divider"></div>
<asp:Literal runat="server" ID="Downloads" />
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(function () {
$(document).ready(function () {
$("#ShowLargeImage").fancybox();
$("#viewMoreCompats").click(function (e) {
e.preventDefault();
$("#ExtraCompatibleDevices").toggle("slow");
if ($("#viewMoreCompats").html() == "View More +") {
$("#viewMoreCompats").html("View Less -");
}
else {
$("#viewMoreCompats").html("View More +");
}
$(".productDetailSection img").each(function () {
var img = $(this);
if (img.width() > 140) {
img.css({ 'width': '140px' });
}
});
});
$("#viewMoreCompats2").click(function (e) {
e.preventDefault();
$("#ExtraCompatibleDevices2").toggle("slow");
if ($("#viewMoreCompats2").html() == "View More +") {
$("#viewMoreCompats2").html("View Less -");
}
else {
$("#viewMoreCompats2").html("View More +");
}
$(".productDetailSection img").each(function () {
var img = $(this);
if (img.width() > 140) {
img.css({ 'width': '140px' });
}
});
});
$("#viewMoreAccessories").click(function (e) {
e.preventDefault();
$("#ExtraAccessories").toggle("slow");
if ($("#viewMoreAccessories").html() == "View More +") {
$("#viewMoreAccessories").html("View Less -");
}
else {
$("#viewMoreAccessories").html("View More +");
}
$(".productDetailSection img").each(function () {
var img = $(this);
if (img.width() > 140) {
img.css({ 'width': '140px' });
}
});
});
$("#viewMoreAccessories2").click(function (e) {
e.preventDefault();
$("#ExtraAccessories2").toggle("slow");
if ($("#viewMoreAccessories2").html() == "View More +") {
$("#viewMoreAccessories2").html("View Less -");
}
else {
$("#viewMoreAccessories2").html("View More +");
}
$(".productDetailSection img").each(function () {
var img = $(this);
if (img.width() > 140) {
img.css({ 'width': '140px' });
}
});
});
$("#tab1").fancybox({
//'title': $("#tab1").html()
});
$("#tab2").fancybox({
//'title': $("#tab2").html()
});
$(".productDetailSection img").each(function () {
var img = $(this);
if (img.width() > 140) {
img.css({ 'width': '140px' });
}
});
});
});
})(jQuery);
</script>
<div class="TABLE-CONTAINER clearfix" style="margin-bottom: 30px;">
<div class="product-detail-header-row clearfix">
<div class="product-specs-header">
product specifications:<br>
</div>
<div id="tabbedLinks">
<div class="product-tbl-link">
<asp:Literal runat="server" ID="tab2" />
</div>
<div class="product-tbl-link">
<asp:Literal runat="server" ID="tab1" />
</div>
</div>
</div>
<asp:Literal runat="server" ID="attributes" />
</div>
<asp:Literal runat="server" ID="CompatibleProducts" />
<asp:Literal runat="server" ID="CompatibleProducts2" />
<asp:Literal runat="server" ID="Accessories" />
<asp:Literal runat="server" ID="Accessories2" />
<script type="text/javascript">
jQuery.noConflict();
(function ($) {
$(function () {
$(document).ready(function () {
// Request Info
$('.RequestInfo').click(function (event) {
var url = "/Redacted/otherpages/requestinformation.aspx?In Reference To=Item: " + $(".Item-No").html().trim();
var width = 735;
var height = 710;
$.fancybox({
'title': 'Request Information',
'autoDimensions': false,
'width': width,
'height': height,
'titlePosition': 'inside',
'href': url,
});
event.preventDefault();
});
});
});
})(jQuery);
</script>
<asp:Literal ID="DownloadScript" runat="server" />
<div class="productDetailSection">
<div id="contentTab1" style="display: none" class="noPrint">
<div class="show">
<asp:Literal runat="server" ID="Tab1Content"></asp:Literal></div>
</div>
<div id="contentTab2" style="display: none" class="noPrint">
<div class="show">
<asp:Literal runat="server" ID="Tab2Content"></asp:Literal></div>
</div>
</div>
<!--Survey Code -->
<sc:Placeholder runat="server" Key="SurveyCode"></sc:Placeholder>
I have two different tables in my html, and lets assume they all have the same data collection - meaning the rows are representing the same object in the collection. I would like to apply a following functionality: when I hover on the row N in Table 1, it highlights row N in Table 1 and the same row in Table 2. I was able to get it done, however I had to manipulate my collection - I added .hover property on object, and treated it as a flag on mouse enter and mouse leave, and added specific styles according. However, I know this should not be done this way - as it breaks the two way data binding rule.
Any ideas on how I can achieve that without manipulating my data?
You could achieve this by using little jQuery:
var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
Both of your table rows need to have a class like a row number for example counting them:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg defines a background-color for highlighted state, in this example .table1 and .table2 are the classes of the tables.
Think that should do the work.
is this what you want.but I used bit jquery with this.hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
A solution to the problem, without using jQuery, would be the following:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
Here you can see the solution in action: JSFiddle