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();
}
});
});
Related
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.
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')
I have a row of nested table, each with an individual ID and multiple rows. In the first table (blank0) I have the action deleteLink
$(document).ready(function(){
$("#blank0 .deleteLink").on("click",function() {
var tr = $(this).closest('tr');
tr.fadeOut(400, function(){
tr.remove();
});
return false;
});
});
This deletes the selected row as expected. What I want it to do is to delete the same row across all my tables. For example if I click the 3rd delete button, I would want it to delete the 3rd row on blank0 through to blank9
I'd give all the tables a common class and use the rowIndex property to filter out the <tr>s.
$('.blank').on('click', '.deleteLink', function () {
var rowIndex = $(this).closest('tr').prop('rowIndex');
$('.blank tr').filter(function () {
return this.rowIndex === rowIndex;
}).remove();
});
Here is a demo: http://jsbin.com/yugurekiri/1/edit?html,js,output
I am making a dynamic table as the code shown below. I need clickable rows that take the user to other page.It works fine only till the last but one row.The clickable row functionality is not present in last row.
$(window).load(function(){
$.get("http://localhost:8080/MusicPlayer/GetSongList", function(data){
console.log(data);
var library = data;
var table = $("#table");
var row;
library.songs.forEach(function(song){
row = $("<tr></tr>");
$("<td />").addClass("song-select").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);
$("<td>"+song.title+"</td>").appendTo(row);
$("<td>"+song.album.albumName+"</td>").appendTo(row);
$("<td>"+song.artist+"</td>").appendTo(row);
$("<td>"+song.rating+"</td>").appendTo(row);
$("<td>"+song.composer+"</td>").appendTo(row);
$("<td>"+song.genre.genreName+"</td>").appendTo(row);
row.appendTo(table).click(viewFunction());
});
});
});
});
function viewFunction(){
$('#table tbody tr td:not(.song-select)').click(function () {
var songTitle = $(this).parent().children('td:eq(1)').text();
window.location.assign("http://localhost:8080/MusicPlayer/getSong?songTitle="+songTitle);
});
}
Check this. You got to use .on function instead of the viewFunction.
$(function(){
$.get("http://localhost:8080/MusicPlayer/GetSongList", function(data){
console.log(data);
var library = data;
var table = $("#table body");
var row;
library.songs.forEach(function(song){
row = $("<tr></tr>").data('song-title', song.title);
$("<td />").addClass("song-select").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);
$("<td>"+song.title+"</td>").appendTo(row);
$("<td>"+song.album.albumName+"</td>").appendTo(row);
$("<td>"+song.artist+"</td>").appendTo(row);
$("<td>"+song.rating+"</td>").appendTo(row);
$("<td>"+song.composer+"</td>").appendTo(row);
$("<td>"+song.genre.genreName+"</td>").appendTo(row);
row.appendTo(table);
});
});
});
$('#table tbody').on('click', 'td:not(.song-select)',function () {
var songTitle = $(this).parent().data('song-title');
location= "http://localhost:8080/MusicPlayer/getSong?songTitle="+songTitle;
});
});
You have to use .on() for binding click events for dynamically added row, like below -
$('#table tbody').on("click"," tr td:not(.song-select)",function () {
But here you are adding song-select class to the last row td, as shown below
$("<td />").addClass("song-select").
and your jquery selector is filtering all td which are having song-select class, see below
$('#table tbody tr td:not(.song-select)').click(function () {
Either you need skip adding class to the last row or to change your selector.
Skip adding class -
$("<td />").append($("<input />").attr({type:"checkbox",class:"checkbox",value:song.title})).appendTo(row);
OR
change selector (use .on() for binding click event for dynamic row.)
$('#table tbody').on('click','tr td',function () {
Use event delegation for dynamic elements. Try this:
$('#table').on('click','tbody tr td:not(.song-select)'function () {
}
Assume we have table:
<table>
<tr>first</tr>
<tr class="ClassName">second</tr>
<tr class="ClassName">third</tr>
</table
And We want to remove row with class='ClassName'
I wrote a code:
var Ids = $('.ClassName').map(function () {
return this
}).get();
if (Ids.length > 0) {
for (var i; i = 0; i++) {
Ids[i].hide();
}
}
I need to know if there are any rows with this class. If yes I need to remove them. If no I call ajax, read from db and add rows to table. Its part of Show/Hide mechanism
But my code do nothing. Rows still appear in the page. What should I change?
jQuery
// check if are any rows with this class
var $rows = $('table tr.ClassName');
if( $rows.length > 0 ) {
// remove them or hide with .hide();
$rows.remove();
} else {
// call ajax ...
}
Why not just:
$('table tr.ClassName').hide();
if you want remove permanent then you can use this one.
$('.ClassName').each(function(){
$(this).remove();
});
Here you go -
$("table tr[class='ClassName']").remove();
Please mark this as "Answered" if this solves your problem.
Try using hasClass() in jquery.
JQuery:
//Check if any row has class
if($('table tr').hasClass("ClassName")){ //remove from table }
else{
//do your ajax call here.
}
You can just remove all with that class and then check if there was any:
$(function () {
var $trs = $('table tr.ClassName');
$trs.remove();
if ($trs.length === 0) {
// Ajax-call
}
});
It should work
$("table").find(".ClassName").remove();
If you want to remove all the table rows other than first row means you can try this
$("table").find("tr:gt(0)").remove();