Javascript targeting tr element - javascript

Im trying to target elements inside of a table with the class '.income_table'. I want to toggle/untoggle a highlighted background color each time a element gets clicked. This isn't working:
<script>
$(document).ready(function(){
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
Is there a problem with my code?

Works for me : http://jsfiddle.net/mplungjan/xBzPW/
<style>
.income_table { background-color:red }
.toggled_tr { background-color:yellow }
</style>
<script>
$(document).ready(function() {
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
<table class="income_table">
<tr>
<td>Row 1 cell 1</td>
<td>Row 1 cell 2</td>
</tr>
<tr>
<td>Row 2 cell 1</td>
<td>Row 2 cell 2</td>
</tr>
</table>

It looks right, you may need to target the TDs though and apply the class there. Try:
<script>
$(document).ready(function(){
$(".income_table tr td").click(function () {
$(this).siblings().toggleClass("toggled_td");
});
});
</script>

Related

HTML e JAVASCRIPT table scan

I've a very big table in a HTML page and I create a text input for show only the matching row of the table.
This is my code:
<input type="text" id="myInput" oninput="myFunction()">
<table id="tabella">
<tr><th>TIPO</th><th>SCHEMA</th><th>NOME</th><th>DDL</th></tr>
<tr><td>[...]</td></tr>
[...] > 10000 rows
</table>
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
var table = document.getElementById('tabella');
for (var i = 0, row; row = table.rows[i]; i++)
{
for (var j = 0, col; col = row.cells[j]; j++)
{
$(row).hide();
}
}
for (var i = 0, row; row = table.rows[i]; i++)
{
if ( row.cells[2].innerHTML.includes(x) )
{
$(row).show();
}
}
}
</script>
The problem is:
When I type a single character in the input field it waits for a very long time Is there a mode for rewrite that is faster?
There are several things you can do to improve the performance...
Don't use .innerHTML when the text you are working with doesn't
contain HTML because the browser engages the HTML parser every time
you use this. For getting/setting text that does not contain HTML,
use .textContent. In JQuery, the analogous methods are .html() and .text().
Don't scan the DOM for elements that you've already scanned for
previously. This means make cached variable references to your DOM
objects outside of your repeatedly called functions.
Rather than looping over every row and cell manually, and since you are using
JQuery, just get all the rows into a JQuery wrapped set and work with
that collection. Use the JQuery
.find() method with the JQuery :contains selector.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#demo { margin-top:1em; padding:3px; width:20%; font-weight:bold;
border:1px solid #aa0; background:#ee3; height:1em;
}
</style>
</head>
<body>
<input type="text" id="myInput">
<table id="tabella">
<thead>
<tr>
<th>TIPO</th>
<th>SCHEMA</th>
<th>NOME</th>
<th>DDL</th>
</tr>
</thead>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 21</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 21</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 21</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 21</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
</tr>
</table>
<div id="demo"></div>
<script>
// Get your DOM references outside of the callback function
// so that you aren't scanning the DOM over and over for the
// same elements.
let $tbl = $("#tabella");
let $dem = $("#demo");
// Don't use inline HTML event handlers (i.e. oninput).
// Do all of yor JavaScript outside of the HTML
$("#myInput").on("input", myFunction);
function myFunction() {
// Hide all the rows in the table, except the header row
// (<tbody> is implicitly created)
$("tbody > tr",$tbl).hide();
// Then, find the row(s) that contain the entered text and show only them.
let $found = $tbl.find("tbody > tr:contains('" + this.value + "')").show();
// Don't use .innerHTML for non-HTML strings, use .textContent instead.
// In JQuery, that's .text() instead of .html()
$dem.text($found.length + " records found.");
}
</script>
</body>
</html>
Thank guys I found the solution:
<script>
var $rows = $('#tabella tr');
$('#myInput').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>

Iteratively reveal one html table row after the other upon clicking a button

I have a html table with a fixed number of rows, of which only the first one is visible from the beginning. Upon clicking a button, row 2 should be revealed. Upon clicking the same button again, row 3 should be revealed, and so on.
Importantly, the full table should be loaded at the beginning (each row contains a specific django formfield), so I do not want to generate additional html rows when clicking the button.
I found lots of stuff on toggling/showing table rows using jQuery, but what I want to do here is I want to show additional rows each time the button is clicked.
My idea was to first initiate and then increment a variable upon clicking in Javascript, and then show an additional row each time. I failed.
I am newbie to Javascript, any suggestions highly appreciated!
$(document).ready(function() {
var counter = 1;
var $rows = $("#fullTable tr");
$("RevealRow").click(function() {
counter++;
$rows.eq(counter).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fullTable">
<tr>
<td>Row 1</td>
</tr>
<tr style="display:none;">
<td>Row 2</td>
</tr>
<tr style="display:none;">
<td>Row 3</td>
</tr>
<tr style="display:none;">
<td>Row 4</td>
</tr>
<tr style="display:none;">
<td>Row 5</td>
</tr>
<tr style="display:none;">
<td>Row 6</td>
</tr>
</table>
<button id="RevealRow">Show more rows</button>
Try this jQuery code
$(document).ready(function () {
$("#RevealRow").click(function () {
$("#fullTable tr:visible").next().show();
});
});

Hide cell with jquery when empty ( no content)

I am trying to hide empty cells with jquery but the code doesn't work
<script>
jQuery(document).ready(function() {
if(jQuery('.tabcontent_01_custom_property_fields').html())
{
( $("th:empty").text().length == 0) .css('display', 'none');
}
});
Any tips would be great.
You already have the :empty selector, which is enough. See the working fiddle:
HTML:
<body>
<table class="table">
<tr>
<td>Test</td>
<td></td>
<td>Test 2</td>
<td></td>
<td>Test 3</td>
</tr>
</table>
</body>
JS:
jQuery(document).ready(function() {
if(jQuery('.table').html())
{
( $("td:empty").css('display', 'none'));
}
});
https://jsfiddle.net/8vym5vk8/1/
You could even shorten the JS:
jQuery(document).ready(function() {
( $(".table td:empty").css('display', 'none'));
});
https://jsfiddle.net/8vym5vk8/2/

Bind different events with jQuery eq() and not()

HTML
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>
JS
$(document).ready(function() {
$("tr").find("td").eq(2).click(function(){
alert('hi');
});
$("tr").find("td").not().eq(2).click(function(){
alert('hi2');
});
});
What I'm trying to do here is bind a different click event for the every 3rd <td> of each row and every other <td> different click function. 1st function works but how can I bind event for the <td>'s which are not the 3rd ones?
Pass the selector to the not method.
$("tr").find("td").not(':eq(2)').click(function(){
alert('hi2');
});
http://jsfiddle.net/z9HUB/
try this out live fiddle
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi2');
});
$("tr").find("td:not(:eq(2))").click(function(){
alert('hi');
});
});
Try $("td:not(:eq(2)")
$("tr").find("td:not(:eq(2)").click(function(){
alert('hi2');
});
You could do something like this:
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi');
});
$("tr").find("td:lt(2)").click(function(){
alert('hi2');
});
});

Change Table Row background color on Timer Event using jquery

I basically have this markup coming from my JSP. I add class in each row and I want have a blinking effect on each row.
<table>
<tbody>
<tr class="blinkYellow">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr class="blinkYellow">
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
I setup a Jquery function and a timer like below. But I am currently unsure why the background-color of the table did not change.
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
if($(this).attr("background-color") == "yellow"){
$(this).attr("background-color", "white")
}else{
$(this).attr("background-color", "yellow")
}
})
}
});
I check out the Firebug HTML Tab and I notice that the background-color is really being changed on the selected element row.
But I am not sure why the background color of the row is not toggling its color from yellow and white.
Wouldn't it be better to use css classes to add the color. If you do so, you can use jquery as follows:
$(this).toggleClass("blink-yellow");
EDIT:
You can use this page for trying out such things... http://jsfiddle.net/rgkQK/3/
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
$(this).toggleClass("background-color-yellow");
})
}
});
In fiddle it looks like it would work quite well ;-)
The attr function will add/change an attribute. Use the css function instead of the attr function.
$(document).ready(function(){
setInterval(findYellow,1000);
function findYellow(){
$("tr.blinkYellow").each(function(){
var $this = $(this);
if($this.css("background-color") == "yellow"){
$this.css("background-color", "white")
}else{
$this.css("background-color", "yellow")
}
})
}
});
Another option would be to set a css style for the blinkYellow class that includes a background-color of yellow, and then toggle it:
var $blinkYellow = $("tr.blinkYellow");
$(document).ready(function(){
setInterval(findYellow, 1000);
function findYellow() {
$blinkYellow.each(function() {
// note: jQuery is not really needed here - instead, you could use the following line
// this.className = this.className == 'blinkYellow' ? '' : 'blinkYellow';
$(this).toggleClass('blinkYellow');
});
}
});

Categories