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
Related
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();
}
});
});
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);
});
});
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();
Currently I have two tables
I have select-all functions on the top left checkboxes, but clicking on one select-all highlights all checkboxes in BOTH tables, whereas I only want all boxes to be selected in the specific 'check-all' clicked.
Also, when I do select all and click one of the directional buttons < or >, it drags all the rows fine but drags the headers with it as shown here:
My JQuery is quite simple at the moment but I'm obviously missing out on something -
$('#select-all').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = false;
});
});
Where 'select-all' is the id of the select-all checkbox in the 'tarifs de quittancement'.
Any help is appreciated
EDIT
My JQuery for the > button code is as follows :
$("#move-to-1").on("click", function () {
var selected = $("#table2").find("input:checked");
selected.each(function (idx, elem) {
$(elem).closest("tr").detach().appendTo($("#table1 tbody"));
});
});
This works fine to move all from one table to the other, but I don't want the row containing the select-all checkbox/table headers to move with the rest of the row data. How can this be done?
Thanks again.
Further Edit
Now it's all sorted, except for a small bug where selecting one checkbox row (not select-all) and moving it < or > results in ALL rows being moved.
JQuery in use:
$('#move-to-1').on('click', function () {
var selected = $('#table2').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
$('input[type=checkbox]').attr('checked', false);
});
});
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
You only need to modify the checkboxes inside the current table. Since you haven't shown your markup it is extremely hard to guess how the proper selector might look or whether you are using tables at all but try like this:
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
UPDATE:
To address your second question, assuming you have separated the headers from the body inside those tables using the <thead> and <tbody> sections which is the correct way, you could adapt your selector:
$('#move-to-1').on('click', function () {
var selected = $('#table2 tbody').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tr').detach().appendTo($("#table1 tbody"));
});
});
$('#select-all').click(function (event) {
// mention the table
var table = $('selector_to_your_table');
if (this.checked) {
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = false;
});
});
Note
In latest version of jQuery :checkbox is deprecated. See here..
Instead of :checkbox use input[type=checkbox].
Instead of:
$(':checkbox').each(function () {
this.checked = true;
});
Do:
$('some_sort_of_selector :checkbox').attr('checked', true);
You don't need that each() loop - jQuery does it automatically. You need some kind of selector to limit which checkboxes are changed.
I notice you have #select-all - and yet you say you have two select-all checkboxes. You can't do that. ID's must be unique.