I have the table and with fields id,name,geo,age I want to collect name,id and age of the table which have the geo ME.
name= ["a","b","c"]
id= ["1","2","3"]
age =["30","20","42"]
$(document).ready(function(){
/*$(#geo tbody).find('tr').each(function( index ){
console.log($(this).find(td:1));
}); */
name= new Array();
$('#geo tbody').find('tr').each(function( ) {
// console.log($( this).find(':nth-child(3)').text());
if ($( this).find(':nth-child(3)').text()=='ME'){
val= $( this).find(':nth-child(2)').text() ;
name=$( this).find(':nth-child(2)').text() ;
}
//console.log(name);
});
console.log(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
I want to insert the value in array .now I can get only the last data.how to push the value in an array in each loop
You can simply use .push to push values inside arrays.
Demo Code :
$(document).ready(function() {
var age =[];
var name = [];
var id = [];
$('#geo tbody').find('tr').each(function() {
if ($(this).find(':nth-child(3)').text() == 'ME') {
id.push($(this).find(':nth-child(1)').text());//push same
name.push($(this).find(':nth-child(2)').text());
age.push($(this).find(':nth-child(4)').text())
}
});
console.log(name);
console.log(id);
console.log(age);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Firstly, you need to add var in name = new Array();:
var name = new Array();
Next, you need to use the .push() function to add data to the array:
name.push($(this).find(':nth-child(2)').text());
Here is an example of plain JavaScript version ....
const id = [];
const name = [];
const age = [];
// get the tr in the tbody
document.querySelectorAll('#geo tbody tr').forEach(tr => {
id.push(tr.children[0].textContent);
name.push(tr.children[1].textContent);
age.push(tr.children[3].textContent);
});
console.log(id, name, age);
<table id="geo">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>geo</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>ME</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>ME</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>ME</td>
<td>42</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>USA</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>e</td>
<td>UK</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Related
I have a table that is already defined and populated. Now what I'm trying to do is to find a specific column and after that create a new column, at the moment I have the code to handle this:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
newTh = `<th data-something="1-1">
New Column
</th>`;
th.after(newTh);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The column is added properly but it's keeping the value from the pre-existing column. What can I do to move the content after/before adding a new column?
You can get the index of th element, and then you can find each tr to append New Column td value. Like below:
$(document).ready(function() {
something();
});
function something() {
var newTh = "";
var th = $(`#tblTable th[data-something="1"]`).last();
var index = th.index();
newTh = `<th data-something="1-1">New Column</th>`;
th.after(newTh);
$("#tblBody").find("tr").each(function(){
var tr = $(this);
tr.find("td").eq(index).after(`<td>new column value</td>`);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
The easiest method would be to add another <td> in each <tr> and copy the text into the new <td>.
This works because each <th> must be at the same index as each <tr>.
$(document).ready(function() {
something();
});
function something() {
const th = $('#tblTable th[data-something="1"]').last();
th.after('<th data-something="1-1">New Column</th>');
$('#tblTable tbody').children().each(function() {
$(this).children().eq(th.index()).after('<tr></tr>');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTable">
<thead>
<tr>
<th>Id</th>
<th data-something="1">Name</th>
<th>Price</th>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td>1</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>100</td>
</tr>
</tbody>
</table>
I have a table with 4 rows and columns, I want to first show half of it and then show half of the rest. How to do it?
I have tried this js code with event fadeIn() but not working:
$.fn.slide=function(){
var self=this,kids=self.children()
setInterval(function(){
kids.filter(':hidden').fadeIn()
$(this).appendTo(self)
kids=self.children()
},1000)
return this
}
$(function(){
$('tbody').slide()
})
My html:
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Like first display rows from 1->8 and after that delete it, display from 9->16.
The first mistake is that in the setInterval you used this which referred to window and not the table as I think you thought, using the code below every x seconds you will have the data change:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setInterval(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Instead if you need just one time slide you need setTimeout like:
$.fn.slide = function() {
var self = this,
kidsHidden = self.children().filter(':hidden'),
kidsNotHidden = self.children().filter(':not(:hidden)');
kidsHidden.fadeIn();
kidsNotHidden.fadeOut();
};
$(function() {
setTimeout(function() {
$('tbody').slide()
}, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTbl">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr hidden>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr hidden>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
Reference:
setInterval
setTimeout
There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
I have a table here that I am trying to hide table row if the patient ID = patient ID. The table is loaded dynamically with XML. I will provide an example here.
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
So the rows where id = 1 and where id = 3 both have multiple rows. I want to only display one row and hide the other 3 unless i double click the row then it will display the 2,3,4,5 rows etc.
so this will be the end result:
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
and when you double click the row it will switch the css to display the hidden rows.
Use JavaScript to iterate over all rows in the table. If any have the
same ID as a previous row then set the style to display: 'none'.
Add an event listener to each row that listens for double clicks. On a double click check the row's next sibling. If it has the same ID as the current row then set its style to display:'table-cell'.
var ids = [],
rows = document.querySelectorAll( '.table tr' )
Array.from( rows ).forEach( row => {
var rowID = row.querySelector( 'td:first-child' ).innerHTML
if ( !ids.includes( rowID ) )
ids.push( rowID )
else
row.style.display = 'none'
row.addEventListener( 'dblclick', () => {
var next = row.nextElementSibling,
nextID = ( next ? next.querySelector( 'td:first-child' ).innerHTML : null )
if ( nextID = rowID )
next.style.display = 'table-row'
} );
} )
<table class="table">
<thead>
<tr>
<td>Patient ID</td>
<td>Name</td>
<td>Reason for visit</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Christian</td>
<td>Cold</td>
</tr>
<tr>
<td>1</td>
<td>Christian</td>
<td>Checkup</td>
</tr>
<tr>
<td>2</td>
<td>Suzy</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Cold</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Blood Test</td>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>Ankle</td>
</tr>
<tr>
<td>5</td>
<td>Alex</td>
<td>Cold</td>
</tr>
</tbody>
</table>
I'm trying to create a table with a fixed header, where the body scrolls under the head - which is fine, and there's lots of great examples out there.
The complication is that I want to be able to have sticky subheaders that scroll with the rest of the table, until they hit the table header, and then don't move until the rest of the section has scrolled underneath them, at which point they're replaced by the next sticky subheader (a little like the iphone address book). An example of how I need it to look: Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery
The example above isn't done with a table, and i have a lot of tabular data I need to show, so it will need to be a table.
I've not been able to find an example of this working so far and everything I've tried has failed miserably. I've included a link to a jsfiddle example that doesn't have any fixed heads etc, as I thought it would avoid conflicts with other solutions: https://jsfiddle.net/q7zLhus0/
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</thead>
<tbody>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
</tr>
<tr>
<td>1</td>
<td>6</td>
<td>3</td>
<td>6</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>S</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>5</td>
<td>3</td>
<td>7</td>
<td>9</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
<td>3</td>
<td>H</td>
<td>D</td>
</tr>
<tr>
<td>Q</td>
<td>R</td>
<td>T</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>4</td>
<td>W</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>3</td>
<td>W</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td>E</td>
<td>3</td>
<td>S</td>
</tr>
<tr>
<td>T</td>
<td>4</td>
<td>D</td>
<td>H</td>
<td>S</td>
</tr>
<tr>
<td>4</td>
<td>S</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>R</td>
<td>7</td>
<td>S</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
<tr>
<th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
</tr>
<tr>
<td>5</td>
<td>D</td>
<td>S</td>
<td>6</td>
<td>S</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>J</td>
</tr>
<tr>
<td>6</td>
<td>S</td>
<td>D</td>
<td>F</td>
<td>3</td>
</tr>
<tr>
<td>F</td>
<td>L</td>
<td>P</td>
<td>T</td>
<td>D</td>
</tr>
</tbody>
Any help would be greatly appreciated. This one has really stumped me.
Add This Function
function stickyTitles(stickies) {
var thisObj = this;
thisObj.load = function () {
stickies.each(function () {
var thisSticky = jQuery(this).append('<span class="test" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {
thisObj.scroll();
});
}
thisObj.scroll = function () {
stickies.each(function (i) {
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i + 1),
prevSticky = stickies.eq(i - 1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
jQuery(document).ready(function () {
new stickyTitles(jQuery(".subheader")).load();
});
Demo Link -https://jsfiddle.net/kjo9w57a/1/