I want to call a function for every cell in a table except the first column. Until now, I have the following code:
<script type="text/javascript">
$("#resultstable tr").each(function () {
$('td', this).each(function () {
....do my staff...
})
})
</script>
This apply the function to every cell in my table. If I change the code to this, I thought that it will work, but it doesn't.
<script type="text/javascript">
$("#resultstable tr").each(function () {
$('td :not(:first-child)', this).each(function () {
....do my staff...
})
})
</script>
Just slice the elements:
$("<selector>").slice(1).each(function () {...});
.slice( start [, end ] )
Description: Reduce the set of matched elements to a subset specified by a range of indices.
Another working solution would be to build a spaghetti selector using :not and :first:
$("tr").each(function () {
$("td:not(:first)", this).each(function () {
// do something
});
});
Example
var colors = ["#f1c40f", "#2ecc71"];
$("table tr").each(function() {
$("td", this).slice(1).each(function(i) {
$(this).css("background", colors[i])
});
});
setTimeout(function() {
$("table tr").each(function() {
$("td:not(:first)", this).each(function(i) {
$(this).css("background", colors[colors.length - i - 1])
});
});
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>19</td>
<td>Europe</td>
</tr>
<tr>
<td>Bob</td>
<td>20</td>
<td>Europe</td>
</tr>
<tr>
<td>Carol</td>
<td>15</td>
<td>Australia</td>
</tr>
</tbody>
</table>
Related
How to highlight
Victor and Steve....(and other from #output if is change)
Html
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
jquery
var gg = $('#output').text();
$(document).ready(function(){
$('table tr').each(function(){
if($(this).find('td').eq(1).text() == gg){
$(this).css('background','red');
}
});
});
here the JSFiddle
You can use includes() to check if string contains sub-string.
var gg = $('#output').text();
$('table tr').each(function() {
if (gg.includes($(this).find('td').eq(1).text())) {
$(this).css('background', 'red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>Victor</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>Steve</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>Michael</td>
<td>17</td>
</tr>
<tr>
<td>9</td>
<td>Michaela</td>
<td>20</td>
</tr>
</table>
If you change your jQuery to this:
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
That should solve it.
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
This is converting the gg variable into an array of names and then inside the each function we're checking if the name is in the array.
A "functional" style solution
var gg = $('#output').text()
$(document).ready(function(){
$('table tr').css('background', function(){
return (gg.indexOf($(this).find('td').eq(1).text())>=0 )? 'red' : 'transparent';
})
});
Here is my code:-
$("span").on('click', function() {
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $(this).closest("table").find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
As you see, when I remove one element (there are still some other element), but there is not any element appears. Why? And how can I fix it?
When $(this).closest("tr").remove(); executes the element is removed from DOM to scope of this is completely lost.
Store the reference of table before removing the row, then perform the remove operation.
var table = $(this).closest("table");
$("span").on('click', function() {
//Store the reference of table before removing the row.
var table = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
Since you removed the clicked span so:-
var remained_trs = $(this).closest("table").find("span");
will be undefined (because $(this) is unrecognisable now), that's why code is not working.
Need to do like below:-
$("span").on('click', function () {
var table = $(this).closest("table");//get clicked span table and create it's object
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if ( remained_trs.length < 1 ) {
table.html('there is not any element'); // change html of corresponding table not the body
}
});
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<td>Four</td>
<td><span>×</span></td>
</tr>
<tr>
<td>Five</td>
<td><span>×</span></td>
</tr>
<tr>
<td>Six</td>
<td><span>×</span></td>
</tr>
</table>
Note:-Also instead of $('body').html('there is not any element'); use table.html('there is not any element'); (since you have multiple tables)
you are deleting current row before getting next thats why it happen
$("span").on('click', function() {
var nearTable = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = nearTable.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
You are removing the parent element of the element you are clicking, so $(this) doesn't exist when you are trying to find the other spans. You need to cache the closest table by doing
var $closestTable = $(this).closest("table");
DEMO
$("span").on('click', function() {
var $closestTable = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $closestTable.find("span");
if (remained_trs.length < 1) {
$('body').html('there is not any element');
}
})
span {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
you are deleting current row before getting next thats why it happen
$("span").on('click', function () {
var table = $(this).closest("table");
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = table.find("span");
if ( remained_trs.length < 1 ) {
$('body').html('there is not any element');
}
});
check for table rows instead of the span you are deleting and referring to!
$("span").on('click', function () {
if (confirm("are you sure?")) {
$(this).closest("tr").remove();
} else {
return false;
}
var remained_trs = $('#table1 tr').length;
if ( remained_trs < 1 ) {
$('body').html('there is not any element');
}
})
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<tr>
<td>one</td>
<td><span>×</span></td>
</tr>
<tr>
<td>two</td>
<td><span>×</span></td>
</tr>
<tr>
<td>three</td>
<td><span>×</span></td>
</tr>
</table>
I've got a table to which I'd like to add a attribute 'data-order' to every last child of every row. See the table below.
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
I'd like to add the value of the last td to the attribute.
Before : <td>255 500</td>
After : <td data-order"255 500">255 500</td>
I use $(this).text() to get the value from the td but it doesn't seem to work the way I thought. I get weird data with multiple table rows included. I use this Javascript code to add the attribute.
$(document).ready(function() {
$( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
});
</script>
What is wrong my code ? Thanks.
At this point this doesn't refer to your $( '#table_id tbody tr td:last-child')
I think you must declarate a var, something like this could help you
var $MyObject = $( '#table_id tbody tr td:last-child');
$MyObject.attr( 'data-order', $MyObject.text());
if you have multiple line in you table you could use this in a each loop.
Example case
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>255 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$( '#table_id tbody tr td:last-child').each(function(){
var $MyObject = $(this); // this here referer to the current object of the loop
$MyObject.attr( 'data-order', $MyObject.text());
});
You can do it like this
var lastTd = $( '#table_id tbody tr td:last-child');
lastTd.attr( 'data-order', lastTd.html());
Please take a look at below code snippet:
$(document).ready(function() {
$( '#table_id tbody tr').each(function(){
$(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>2551 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>2552 5002</td>
</tr>
</tbody>
</table>
Used to .each function as like this
$(document).ready(function(){
$('#table_id tr td:last-child').each(function(){
var thisText = $(this).text();
$(this).attr('data-order',thisText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#table_id tr td:last-child').each(function () {
$(this).attr('data-order', $(this).text());
});
});
You can simply use the data()
$('#table_id tr td:last-child').each(function(){
var text= $(this).text();
$(this).data('order',text);
});
I am adding footables to a table but the table has to have a tbody for each row. This is because I am adding footable sorting and filtering to an existing system that generates the html this way.
It seems to be causing the column sorting at the to be duplicating the table rows each time you try to sort the table by column heading and I cant see why.
The table structure is kinda like this:
<table data-filter="#filter" class="footable table demo">
<thead>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Job Title1</td>
<td>Active</td>
<td>Description1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name2</td>
<td>Job Title2</td>
<td>Disabled</td>
<td>Description2</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$("table").footable().bind("footable_filtering", function (e) {
var selected = $(".filter-status").find(":selected").text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
e.clear = !e.filter;
}
});
$(".clear-filter").click(function (e) {
e.preventDefault();
$(".filter-status").val("");
$("table.demo").trigger("footable_clear_filter");
});
$(".filter-status").change(function (e) {
e.preventDefault();
$("table.demo").trigger("footable_filter", {
filter: $("#filter").val()
});
});
});
I have also set up a working jsfiddle that demonstrates the issue:https://jsfiddle.net/35ht6kup/9/
Anybody have any idea how to resolve this?
You could rebuild the table with jQuery, example (to be refined with a better selector than 'table'):
$(document).ready(function(){
var thead = $('table thead');
var tbodyhtml;
$('table tbody').each(function(){
tbodyhtml += $(this).html();
});
$('table').html(thead);
$('table').append('<tbody>'+tbodyhtml+'</tbody>');
});
I am having table rows and I want to make the whole row clickable.So to do it I right the following ajax code :
$(document).ready(function() {
$('#myrow').click(function ()
{
//alert("hi");
$.ajax({
type: "post",
url: "shownotification.jsp",
data: {
notifyidd: $('#notifyidd').val(),
notifyuser: $('#notifyuser').val()
},
success: function(msg){
//if(msg == "success")
alert('Data updated.');
window.location.reload();
}
});
});
});
But the problem is that it just make my first row clickable, and all other are still not.
What can be the reason? Please help.
Seem like currently you're having duplicated id for your tr, try to apply class instead:
<tr class="myrow" ......
then you can use . to target elements by class:
$(document).ready(function() {
$('.myrow').click(function () {
// Your code here
});
});
bind you code with on and also done with previous code
HTML
<table>
<tbody>
<tr class="myrow">.......
</tr>
</tbody>
</table>
jQuery
you can try two method
$(document).ready(function() {
$('.myrow').click(function ()
{
//your stuff
});
/***or can try this below method**/
$('table').on('click', 'tr', function() {
//your stuff
});
});
Try this
$(document).on('click', '#table-id tr', function() {
alert('Hello');
});
In Your Code you are giving click event on id
i.e. $('#myrow').click(function ()
So it is no working because id of div must be unique. change your rows id with class name then it will work fine
$('.myrow').click(function ()
Refer below link for reference
Demo Link
Table HTML is
<table style="width:300px">
<tr class="tableRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="tableRow">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="tableRow">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Script for click event
$(".tableRow").click(function(e){
alert("Table Tr Clicked");
});