jQuery parents("tr") fadeout not working - javascript

So I'm trying to create a fadeOut effect of a with class "delete" parent tr element.
Here is my jsfiddle, where you can check it live - http://jsfiddle.net/syTXZ/
and code is here -
HTML -
<table border="1px solid black">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Parent</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>test222</td>
<td>test2</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>1</td>
<td>te1t22</td>
<td>tes1t</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
<tr>
<td>3</td>
<td>test2</td>
<td>test</td>
<td>Edit Category</td>
<td>Delete Category</td>
</tr>
</tbody>
</table>​
and js -
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​
but it's not working, any clues? I tried also parent() instead of parents(), but it also didn't work.


Updated with fix: jsFiddle
You were missing );
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​
Should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​);


$("body").delegate("a.delete","click",function() {
$(this).parent().parent().fadeOut(300);
}​);


Demo
It should be
$("a.delete").click(function() {
$(this).parents("tr").fadeOut(300);
}​);

Related

How to convert my simple table to the Datatables

mytable.php
<table id="tableid">
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
Hello Guys, Can anyone help me how to convert my code to the Datatables? Sorry Guys for this question I try to convert but it didn't work. I'm a beginner and still learning how to use tables

Script
$(document).ready(function() {
$('#example').DataTable();
} );
HTML
<table id="example" class="display" style="width:100%">
<tr>
......
</tr>
</table>
In addition to the above code, the following Javascript library files are loaded for use in this example:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js

can javascript event bubbling be done on html controls

Can I have a separate js file which performs action on html control events like
I have three tables on a webpage whenever I put over mouse on any table a alert should show.
I want the code in a separate js file and I cannot use id or class as selector
the selector should be the html control only like table.onmouseOver
I have tried using the
table.onmouseover = handler;
function handler(event){
alert("mouseOver done");
return false;
}
but it is not working
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</br>
</br>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
As listed above I want to fire event whenever a mouse comes over any of the one table without id or class selector

Try the below Code Snippet
function handler(event){
alert("mouseOver done");
return false;
}
document.addEventListener("DOMContentLoaded", function() {
var oTables = document.getElementsByTagName("table");
for(var i=0;i<oTables.length;i++)
{
oTables[i].addEventListener("mouseover",handler);
}
});
<html>
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>

Based on a Href Value Highlight Row Matching ID from Href Link

Basically when a user clicks on a specific link that I have set-up within an SVG graph view on a page, using a click event that calls window.location.href I would like it to branch to a report (html table via anchor tag) that is below the graph and highlight the rows red, matching the rule id, say where rule id equals 90, passed as part of the href link.
I would like to see in my example below, rows 1 and 4 highlighted red to notify the user which rules are affected.
I would also like a means of first resetting the table highlights, just in case they exists from a previous click based on a different rule id href click.
I realise that I will need to use a jQuery .each() function, but just not sure how to check for Rule = 90 and highlight that entire row.
HTML table may look like the following:
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>

Use :contains() jQuery selector to filter elements and .css() to set the values. .closest('tr') will get the parent row.
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
*Note : :contains() finds match in the whole text node.
$(document).ready(function(){
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>

You could use .filter and return elements containing roleId.
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(td){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
$(document).ready(function(){
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>

JQuery Accordion th

This should be any easy one for you. I want to have a table with rows that expand. I am trying to implement JQuery accordion on class="Accordion1".
it does not work at all.
What am I doing wrong?
...
<script>
$(function() {
$( "th.Accordion1").accordion();
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2" class="Accordion1">GROUP 1</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
<tr>
<th colspan="2" class="Accordion1">GROUP 2</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
Thanks!

I believe you want to use the header option of jQuery Accordion.
$(function () {
$('table').accordion({header: '.accordion1' });
});
http://api.jqueryui.com/accordion/#option-header

I realize that this post is quite old but I have two different solutions for the problem stated and thought to post them anyway, maybe someone is thankful for it.
You can find two options on my Pen.
One including "Group 1" and "Group 2"...
<div class="options" id="op1">
<div class="accordion">
<h3>GROUP 1</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3>GROUP 2</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
And one without
<div class="options" id="op2">
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Be aware that for this to work you have to include jquery and jquery-ui!
The options I've added for the accordion and the CSS are optional... ;)

How to get array item in Selenium IDE and use it?

this is my code
<tr>
<td>storeEval</td>
<td>new Array ('cat','dog')</td>
<td>names</td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{storedVars['names'].length}</td>
<td>length</td>
</tr>
<tr>
<td>storeEval</td>
<td>Math.floor((Math.random()*storedVars['length'])+0)</td>
<td>rn</td>
</tr>
and here is where it doesnt work:
<tr>
<td>type</td>
<td>name=ProductName[2]</td>
<td>javascript{names['1']}</td>
</tr>
this doesnt work as well
(i want to use a random item here):
<tr>
<td>type</td>
<td>name=ProductName[1]</td>
<td>javascript{names[storedVars['rn']]}</td>
</tr>

Try This.
<tr>
<td>storeEval</td>
<td>new Array ('cat','dog')</td>
<td>names</td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{storedVars['names'].length}</td>
<td>length</td>
</tr>
<tr>
<td>store</td>
<td>javascript{Math.floor(Math.random()*storedVars['length'])}</td>
<td>num</td>
</tr>
For Adding values normaly
<tr>
<td>type</td>
<td>name=ProductName[2]</td>
<<td>javascript{storedVars['names'][0]}</td>
</tr>
For Adding values randomly
<tr>
<td>type</td>
<td>name=ProductName[2]</td>
<<td>javascript{storedVars['names'][storedVars.num]}</td>
</tr>
Thank You.

Try this:
javascript{storedVars.names[storedVars.rn]}

Try this to get array item in seleniun ide
<tr>
<td>type</td>
<td>name=ProductName[1]</td>
<td>javascript{storedVars['names'][storedVars.rn]}</td>
</tr>

Categories

Resources