I have an html page with a table (3 columns) and I have 2 checkboxes, the table has more that 1000 rows...
Those are the checkboxes:
<label><input type="checkbox" id="ctimeout" name="ctimeout" value="TRUE"><span>Connect Timeout</span></label>
<label><input type="checkbox" id="rtimeout" name="rtimeout" value="TRUE"><span>Read Timeout</span></label>
When I click on the checkbox Connect Timeout I will search in the connect column and if the value is larger that 0 I hide that row and only keep the row if the value is 0. Also since I only want the results from connect column I hide whole read column. The same thing with the Read Timeout checkbox but reverse, I check the read column for 0 and I hide the whole connect column.
<table id=totable>
<tr>
<th>service></th>
<th class="ct">connect></th>
<th class="rt">read></th>
</tr>
<tr>
<td>service1</td>
<td class="ct">0</td>
<td class="rt">10</td>
</tr>
<tr>
<td>service2</td>
<td class="ct">2</td>
<td class="rt">0</td>
</tr>
</table>
I'm using JQuery to do all this, the script works as expected but there is a performance issue especially with firefox. Is there a better way to do what I do and minimize the performance degradation.
My JQuery code:
(function($) {
$(function() { $("#rtimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').show();
})
};
});
$("#ctimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').show();
})
};
});}
);// end of document ready
})(jQuery);
Don't use Jquery is the best answer.
Related
I was able to copy Jquery code from this previous question (adding favourite button to html table) to create a favorites functionality in my html table.
Unfortunately the script activates the favorite/unfavorite script whenever the row is clicked on rather than just when the star image is clicked. It is simple enough to trigger the 'click' function just for the button by pointing to the 'div' rather than 'tr' but when i do so the script breaks in some way as refreshing the page doesn't store the favorite/unfavorite image elements.
HTML code can be found in the above linked question.
The original question/reply has the working code sample here: https://plungjan.name/SO/bookrating/allbooks.html . Note that if you click anywhere in the row it will activate code rather than just the star.
TLDR: how do i change above Jquery script to work when i only want to click on the star rather than the whole row?
Relevant code below:
const showFavs = function(key, favs) {
if (!favs) return;
key = key.replace("favs", ""); // this could be cleaner
favs = JSON.parse(favs);
$.each(favs, function(i, fav) {
const selector = "#" + key + " tr td[data-id='" + fav + "']";
$(selector).closest("tr").trigger("click"); // click the TR
});
};
$(function() {
$('tr').click(function(e) {
const $parentTable = $(this).closest("tbody");
$(this).find('img.white-star').toggle();
$(this).find('img.yellow-star').toggle();
const $favs = $("tr", $parentTable).has('img.yellow-star:visible');
const favs = $favs.find("td:first").map((i, fav) => $(fav).data("id")).get();
localStorage.setItem($parentTable.attr("id") + "favs", JSON.stringify(favs));
})
// read all favs and trigger them
Object.keys(localStorage).forEach(key => {
if (key.endsWith("favs")) showFavs(key, localStorage.getItem(key));
});
const $onlyRated = $("#onlyrated");
if ($onlyRated.length>0) {
$onlyRated.on("click",function() {
if (this.checked) {
$("tr").find('img.white-star:visible').each(function() {
$(this).closest("tr").hide();
});
}
else {
$("tr").find('img.white-star').each(function() {
$(this).closest("tr").show();
});
}
});
}
});
When the tr is clicked, you can check if the actual element that was clicked is a "star". If it is, then you run the code, otherwise ignore it. Try this
$(function() {
$('tr').click(function(e) {
if ($(e.target).is('.fav img')) {
$(this).find('img.white-star').toggle();
$(this).find('img.yellow-star').toggle();
const $favs = $("tr").has('img.yellow-star:visible');
$("table").prepend($favs)
const favs = $favs.find("td:first").map((i, fav) => $(fav).data("id")).get();
localStorage.setItem("favs", JSON.stringify(favs));
}
});
let favs = localStorage.getItem("favs");
favs = favs ? JSON.parse(favs) : [];
$.each(favs, function(i, fav) {
$("table tr td[data-id='" + fav + "']").each(function() {
$(this).parent().find('.white-star').trigger('click')
});
});
});
img {
height: 25px;
cursor: pointer;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-id="Book A">ല്ലെങ്കിൽ (Eg For Book name in another lang )</td>
<td style="display:none" class="serial-code">book-dais</td>
<td>
<div class="fav">
<img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
<img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
</div>
</td>
</tr>
<tr>
<td data-id="Book B">The chair by Jhon</td>
<td style="display:none" class="serial-code">book-jhon</td>
<td>
<div class="fav">
<img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
<img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
</div>
</td>
</tr>
<tr>
<td data-id="Book C"> ലോഡ് </td>
<td style="display:none" class="serial-code">book-lady</td>
<td>
<div class="fav">
<img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
<img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
</div>
</td>
</tr>
</table>
Credit: https://stackoverflow.com/a/59828700/6214210
Note: localStorage does not work in the snippet so you have to test it locally.
I would like this to turn red whenever the checkbox inside it is checked.
The Html.DisplayFor makes things a little more complicated. The Inactive field in SQL server table is boolean, zero or one.
<td align="center">
#Html.DisplayFor(modelItem => item.Inactive)
</td>
When looking at the table, the value is either 0 or 1. The page shows a checkbox which is desired but I am stuck trying to reference it's value and set the background-color of the surrounding table cell.
Try to use EditFor to replace DisplayFor,and then add the following js to your view:
function changeColor(t) {
if (t.checked) {
$(t).parent().css('background', 'red');
} else {
$(t).parent().css('background', 'none');
}
}
$('input[type=checkbox]').change(function () {
changeColor(this);
})
$(function () {
$('input[type=checkbox]').each(function () {
changeColor(this);
});
})
I'm having a couple of issue with Jquery. Basically I have a .html() response printed and I have to highlight rows of a table on mouseover but it doesn't work.
HTML table
<table id='simplehighlight'>
<tr>
<td>header 1</td>
<td>header 2</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>highlight this row</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>or highlight this row</td>
</tr>
</table>
the table above is printed with PHP echos. The PHP script is called with ajax and the response is printed inside a div with the .html() function. Example:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
}
}, 'text/html');
}
data is the HTML table. Last but not least I have the jquery code for active the highlight which it doesn't work.
$("simplehighlight tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
instead of highlighting the row I have put a simple alert to check if it works, but obviusly it does not. Why? What's wrong in my code? How can I accomplish my task, aka highlight these rows?
Thanks everyone,
Alberto-
Attaching an event handler via jQuery's on should work:
$('body').on('mouseenter mouseleave', '#simplehighlight tr:not(:first-child)', function() {
$( this ).toggleClass( 'highlighted' );
} );
See this jsFiddle.
The good thing with using on this way is, that the table you mentioned may be added at any time (e.g. through an AJAX call). When calling on directly on the jQuery match (as in jQuery("#simplehighlight tr").not(':first').on(...)), jQuery binds the handler only to the currently existing DOM elements.
Note: I replaced the hover event with mouseenter mouseleave, because hover is removed since jQuery 1.9:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a
shorthand for the string "mouseenter mouseleave".
Source: http://api.jquery.com/on/
You have to remember that commands such as the one your are trying to execute, will only be executed against elements that already exist in your DOM. So basically you have to combine the two segments of your code like this:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
$("simplehighlight tr").not(':first').hover(
// do highlight stuffs here
alert("IT WORKS??");
});
}
}, 'text/html');
}
Instead of firing the hover() function manually, you should set up an event handler to do so. Events will also get captured from inserted elements; so you may set up the event listener even before the AJAX call.
jQuery( 'simplehighlight tr' ).not(':first').on( 'hover', function() {
var currentTR = jQuery( this );
currentTR.addClass( 'highlight' );
} );
try
jQuery("#simplehighlight tr").not(':first').mouseover(function(){
// do highlight stuffs here
alert("IT WORKS??");
});
here a js fiddle
here
I have the following html code:
<table id="MatrixTable">
<tr>
<td id="321"> 0 </td>
</tr>
</table
A. How can I replace the '0' text with an hyperlink when mouseover with jQuery like the following:
<table id="MatrixTable">
<tr>
<td id="321">
<a class="modal-dialog-link" href="Edit?matrixID=321" updatefunction="UpdateMatrix">
0
</a>
</td>
</tr>
</table>
$("table#MatrixTable td").mouseover(function () {
// doing something here...
});
B. How can I come back to the original '0' when mouseleave with jQuery like the following:
$("table#MatrixTable td").mouseleave(function () {
// doing something here...
});
Thanks.
Use jQuery.hover
$("table#MatrixTable #321").hover(function () {
$(this).html('<a class="modal-dialog-link" href="Edit?matrixID=321"'+
'updatefunction="UpdateMatrix">0</a>');
},function(){
$(this).text('0');
});
You can use hover to bind an event handler to the mouseenter and mouseleave events, and you can use wrap and unwrap to wrap the contents in an a element:
$("#321").hover(function() {
$(this).contents().wrap("<a>");
}, function() {
$(this).find("a").contents().unwrap();
});
Here's a working example. Inspect the DOM to see the changes as you hover over the element.
This seems like a very strange way to use a link though... why can't the link always be in the DOM?
It's kinda difficult to explain what I want to achieve (and feel free to modify the title if you can think of a better one), so I'll give you an example:
Street: First Lane
South side 28
City: Duckburg
Country: Disneyland
ZIP: 1234567890-XY
This is what I want the user to see. But I also want the user to be able to select only the right column, so he can copy-paste the contents of it elsewhere. If I do this with a table, the user can only select whole rows, and a copy-paste operation will copy row headers as well. If I do this with two separate containers next to each other, the labels get out of synch with the contents if some item has more than one line.
Can this be achieved somehow?
Yes. Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
#left_side { float: left; text-align: right;}
</style>
</head>
<body>
<div id="container">
<div id="left_side">
Street:<br><br>
City:<br>
Country:<br>
ZIP:
</div>
<div id="right_side">
First Lane<br>
South side 28<br>
Duckburg<br>
Disneyland<br>
1234567890-XY
</div>
</div>
</body>
</html>
Yes, it is possible.
Use YUI datatable. It works even with JQuery.
Although this sample use row selection you can use column selection
You can use any input format including JSON, HTML table, XML and text. No input field required. I use somenting like
App http://img74.imageshack.us/img74/1833/singled.gif
According to above, when i click (yes, mouse click) a single row, it will be highlighted (selected) and supported actions will be applied (Edit). Supported actions will be applied according to your business requirement
In your case, a HTML table, you set up according to (You can test it if you want):
First lets set up CSS and JavaScript
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/paginator/assets/skins/sam/paginator.css&2.7.0/build/datatable/assets/skins/sam/datatable.css">
<style type="text/css">
.center {text-align:center;}
</style>
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/element/element-min.js&2.7.0/build/paginator/paginator-min.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/datatable/datatable-min.js&2.7.0/build/json/json-min.js"></script>
Our body (generated on server side)
<body class="yui-skin-sam">
<div id="container">
<table id="source">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>HIDDEN</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>0</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>1</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div id="actionContainer">
<a id="action" href="#">Edit row</a>
</div>
</body>
Now lets configure script after body (code commented)
<script type="text/javascript">
var settings = {
widgetList:{
reference:null,
datatable:{
columnSettings:[
// key attribute matches key attribute in dataSource fields attribute - see bellow
{key:"AAA", label:"A custom label"},
// if label is omitted, default to key value
// className customizes a class to apply to a column
{key:"BBB", className:"center"},
{key:"CCC"},
// i do not want to show id value, so i hide it through hidden attribute
{key:"HIDDEN", hidden:true},
// i want to generate a custom value regardless dataSource, so i set up a custom formatter function - see below
{key:"CUSTOM", label:"A custom value", formatter:customValue}
],
settings:{
selectionMode:"single"
}
}, // eof datatable
dataSource:{
// use $("#source")[0] whether you use JQuery (do not forget set up JQuery)
// source points to data that will populate our datatable
// in our case data will be retrieved from a HTML table
// see responseType bellow
source:YAHOO.util.Dom.get("source"),
settings:{
responseSchema:{
fields:[
// key attribute matches th content
{key:"AAA"},
{key:"BBB"},
{key:"CCC"},
{key:"HIDDEN"}],
// set up input
responseType:YAHOO.util.DataSource.TYPE_HTMLTABLE
}
}
}, // eof dataSource
create:function() {
this.reference = new YAHOO.widget.DataTable("container", this.datatable.columnSettings, new YAHOO.util.DataSource(this.dataSource.source, this.dataSource.settings), this.datatable.settings);
} // eof create
} // eof widgetList
}; // eof setting
// sets up custom value
function customValue(container, record, column, data) {
// container references a cell
container.innerHTML = record.getData("AAA") + " - " + record.getData("BBB") + " - " + record.getData("CCC") + " - " + record.getData("HIDDEN");
}
(function() {
// use $("#actionContainer").set("display", "none"); in JQuery
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
settings.widgetList.create();
// RIA applications
YAHOO.util.Event.addListener("action", "click", function(e) {
e.preventDefault();
var datatable = settings.widgetList.reference;
var recordArray = datatable.getRecordSet().getRecords();
for(var i = 0; i < recordArray.length; i++) {
if(datatable.isSelected(recordArray[i])) {
alert("You have selected id: " + recordArray[i].getData("HIDDEN") + "\nYou can use a JQuery dialog to collect data changes");
}
}
});
// rowClickEvent - use subscribe
settings.widgetList.reference.subscribe("rowClickEvent", function(args) {
// args.target is a Record instance
if(this.isSelected(args.target)) {
this.unselectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
} else {
this.unselectAllRows();
this.selectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "block");
}
});
})();
</script>
</html>
Minimal changes are required if you use JSON, XML or text. Feel free to ask for them.
In order to use column selection use columnClickEvent instead.
regards,
Could you have all of the right hand column of your example in 1 cell somehow? That way it would be all selected together.
The row headers would stay aligned as long as the number of rows in each part of the address was always the same.