We Keep Coding

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);
});
});

click event on a cell and not entire row - with FIDDLE

I am currently using this code for row click event in a bootstrap table
$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element)
{
//....my operation
}
The problem is this triggers for the entire row and I want to be able to trigger it for a single cell.
Note I am using the arguments, row and $element
Here is the FIDDLE

$element is the entire row, you cannot know what cell have been clicked by this way,
bootstrap table do not have cell click event, so you need manually add click event on last cell and fill your needed vars yourself
$('#table').bootstrapTable({
data: data
}).on('click','td:last-child',function(){
var $t = $(this), $row = $t.parent(), i = $row.index(), row = data[i];
var $firstTd = $row.children().eq(0);
if($firstTd.data("haveTable") !== true){
$firstTd.data("haveTable",true);
$firstTd.append('<table class="newTable"><tr><td>NEW TABLE</td></tr></table>');
} else {
$firstTd.data("haveTable",false);
$firstTd.children("table").remove();
}
});
https://jsfiddle.net/e3nk137y/1663/

try
$('#myTable').bootstrapTable().on('click-row.bs.table td', function (e, row, $element)
{
//....my operation
}

Based on my guess, when you click on that cell, you probably want only the triggers for that particular cell to execute and not for the whole table.
This can be achieved by stopping the propagation of event from the table cell to the table row.
$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element){
//stop the propagation for target cell
if($(event.target).hasClass('myClass')) e.stopPropagation();
//the code for handler
...
...
}
There are many ways stopPropagation can be utilized to do this thing. This was just one of those.
Since I dont know how your other triggers are set, I can't write code that works with those with assumptions.

Try this:
$('#myTable tr td:last-child').on('click', function() {
if( $('.newTable', $(this)).length ) {
$('.newTable', $(this)).remove();
} else {
$(this).append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});

Row click event within jquery click function is not working only for last row

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 () {
}

Separate click event for first three td and last td not working in Dom change

I am having four column in my table. When we click one of the first three td that will do one operation and when we click last td that will do other kind of operation.
I did like this
$('#items_list tr td').not('#items_list tr td:last-child').click(function() {
// Do something
}
$("#items_list tr td:last-child").click(function() {
// Do something
}
But those not working when Dom change. I try to use .live(), but the disadvantage of li is
Chaining methods is not supported. Any one can guide me?

There is no need to add events to every cell on the table. One event handler at the table tbody level can handle it.
jQuery("#foo tbody").on("click", function (evt) {
var elem = jQuery( evt.srcElement || evt.target );
if (elem.is("td:last-child")) {
alert("last child");
} else {
alert("not last child");
}
});
You might have to add code to the elem to look for the closest td if you have elements inside of the td.
if (!elem.is("td")) {
elem = elem.closest("td");
}
jsFiddle

$("#items_list tr td").last().click(function(){ });