We Keep Coding

Finding Hidden Elements with an Added Class

I have an Asp gridview that I am hiding elements in using a css class. When a row on the grid is selected I have a jQuery function that adds a selected_row class and changes the color. I am trying to find the data for the rows that are selected, and hidden. My function looks like this
$(function() {
$("[id*=MainContent_grvAccounts] td").bind("click", function() {
var row = $(this).parent();
$("[id*=MainContent_grvAccounts] tr").each(function() {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("selected_row");
} else {
var hiddenElements = $("body").find(".hidden-field").not("script");
console.log(hiddenElements);
var myElements = Array.from(hiddenElements, element => element.innerHTML);
console.log(myElements);
}
});
$("td", row).each(function() {
if (!$(this).hasClass("selected_row")) {
$(this).addClass("selected_row");
} else {
$(this).removeClass("selected_row");
}
});
});
In the DOM I can see that they have a class name of "hidden-field selected_row".
When I try to filter using jQuery grep my data returns empty.
I need the var hiddenElements to only contain elements with class name hidden-field selected_row

I ended up using
var hiddenElements = row.find(".hidden-field");
To get my data.

Best and most Optimized way to Highlight Grid row using jQuery

I have a grid and I am using the jQuery code below to to highlight the row that the user selected.
But it's taking some time to select the row.
How can I optimize it?
function hightlightrow() {
var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
$("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
if ($(this).attr('onclick')) {
if ($(this).attr('onclick').indexOf(index) > 0) {
$(this).addClass("highlight");
} else {
$(this).removeClass("highlight");
}
}
});

You may be able to optimize slightly by storing the result of $(this) into a local variable. That way, it is not building a new jquery object each time.
function hightlightrow() {
var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
$("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
var $row = $(this);
if ($row.attr('onclick')) {
if ($row.attr('onclick').indexOf(index) > 0) {
$row.addClass("highlight");
} else {
$row.removeClass("highlight");
}
}
});
}
Or, you could try something like this:
$("#<%= UltraWebGrid1.ClientID%> tr").click(function(event) {
// Remove the highlight class from all rows up front
$("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight");
$(event.target).addClass("highlight");
});

You could use GridView.SelectedRowStyle property instead of javascript.
For example use declarative syntax:
<asp:GridView runat="server" ID="UltraWebGrid1">
<!-- ... -->
<SelectedRowStyle CssClass="highlight" />
<!-- ... -->
</asp:GridView>
Or set the property programmatically while initialization:
UltraWebGrid1.SelectedRow.CssClass = "highlight";

Try this:
function hightlightrow() {
$("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight");
$("#<%= UltraWebGrid1.ClientID%> tr[onclick*='" + $("#<%= highlightedRow.ClientID%>").val() + "']").first().addClass("highlight");
}
It will remove the highlight class everywhere, then will add it to the first tr which contain the $("#<%= highlightedRow.ClientID%>") value in its onclick attribute.
It should be faster than a loop.

If you want to add class highlight whenever user click on Table Row and, remove same class when user again click on same table row then here's the code
$("YourGridviewControl").on('click', 'tr', function () {
$(this).toggleClass("highlight");
});
Or If you want to remove Class From all rows and add only on one selected row, then your code looks like.
$("YourGridviewControl").on('click', 'tr', function () {
$("YourGridviewControl tr").removeClass("highlight");
$(this).addClass("highlight");
});

Hide all the rows which is inserted newly

I have table which contains 4 rows and (Expand or Collapse) button initially,see the below image
When i click the (Expand or Collapse) button initially,need to insert new row in the middle of rows, i did it using the below code
JQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
});
});
and which in result
Again if click the (Expand or Collapse) button, i need to hide the rows which is inserted in the middle.Is there a way to do this using Jquery or Javascript?

It's pretty simple.
mark all items as new before adding them
if you want to hide them, just remove the last inserted rows (as they are marked)
Here is the code:
JQuery('#btnId').click(function() {
var that = this;
IF ($("newRow", "#example tbody").length = 0){ // add rows if no rows exists
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr class="newRow" id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
});
} // remove rows if already exist
else {
$("newRow", "#example tbody").remove()
}
});

You can use like this:
var inc = 0;
JQuery('#btnId').click(function() {
var that = this;
inc++;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr class=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
if(inc%2==0){//remove at every second click
$('tr .dispId').eq(i).remove();
}
});
});

Set the second option value according to the first option using jquery

I have a table. And I dynamically add rows to the table using jquery.
Each row has 3 select tag. I want to set the value of third option as same as the second one selected.
Here is my code:
$('#table tr').each(function () {
$(this).find('select:eq(1)').change(function () {
var selectedVal = $("#table").find('select:eq(1)').val();
$('#table').find('select:eq(2)').val(selectedVal);
});
});
But my problem is it just worked for only one row. What wrong with my code?
JSFiddle

Delegate event and use as selector tr td:nth-child(2) select:
$('#table').on('change', 'tr td:nth-child(2) select', function () {
$(this).closest('tr').find('select:eq(2)').val(this.value);
});
-jsFiddle-

Use Event Delegation for dynamic events.
$('#table').on('change', 'tr select:nth-child(1)',function() {
//traverse to the parent row
var tr = $(this).closest('tr');
//Find the second select
var secondSelect = tr.find('select:eq(2)');
//Set value
secondSelect.val($(this).val());
});
DEMO

First off:
var selectedVal = $("#table").find('select:eq(1)').val();
should probably be:
var selectedVal = $(this).find('select:eq(1)').val();
else you are only getting the first row's select...
But a little nicer might be:
$('#table tr').each(function(iter, elem) {
$(elem).find('select:eq(1)').change(function(){
var selectedVal=$(this).val();
$('#table').find('select:eq(2)').val(selectedVal);
});
});

How to unbind the grid view row click event in Jquery

I need to unbind datagrid row click event,
I have tried a lot using
$.each(gridData, function (index, row) {
if (row)
{
if (row["Islicense"].toString() == "false")
{
$('.grid_table tr').each(function () {
var ballyDataGridRow = $(this);
if (ballyDataGridRow.attr('valuemember') == row["ComponentID"]) {
// ballyDataGridRow.find("tr").unbind('click');
//ballyDataGridRow.find("tr").undelegate("click");
// ballyDataGridRow.find("tr").off("click");
//ballyDataGridRow.find('input').prop("disabled", true);
}
});
}
}
});
I have used unbind,undelegate,off, even its not working

If your ballyDataGridRow has had a click attached, then there is no need for the find('tr') as that is the tr already.
e.g. use this instead
ballyDataGridRow.off("click");
or
ballyDataGridRow.unbind("click");
At the moment you are searching for a tr within each tr, which is like doing this:
$('.grid_table tr tr')