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>
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 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>
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 want to get the column header of the table on cell click.I have tried as below.Now all the th value is displaying.now to get the relavent th value.
$('td').click(function() {
var txt = $(this).text();
var label=$(this).closest('tr').find('.label').text();
var header=$(this).closest('table').find('th').text();
console.log(txt + ':' +label + ':'+header);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead id="thead">
<th></th>
<th>Week 1 </th>
<th>Week 2 </th>
<th>Week 3 </th>
<th>Week 4 </th></thead>
<tbody id="tbody"><tr><td class="label">test1</td><td>5</td><td>2</td><td>7</td><td>1</td></tr><tr><td class="label">test2</td><td>9</td><td>15</td><td>12</td><td>4</td></tr><tr><td class="label">test3</td><td>32</td><td>12</td><td>23</td><td>28</td></tr><tr><td class="label">test4</td><td>1</td><td>0</td><td>0</td><td>0</td></tr></tbody>
<tbody id="tfooter"><tr><td>Total</td><td>145</td><td>120</td><td>157</td><td>162</td></tr></tbody>
</table>
To make this work you need to get the th which matches the index of the clicked td in the row. To do that use index() and eq(), like this:
$('td').click(function() {
let $cell = $(this);
let txt = $cell.text();
let label = $cell.closest('tr').find('.label').text();
let header = $cell.closest('table').find('th').eq($cell.index()).text();
console.log(txt + ':' + label + ':' + header);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead id="thead">
<th></th>
<th>Week 1 </th>
<th>Week 2 </th>
<th>Week 3 </th>
<th>Week 4 </th>
</thead>
<tbody id="tbody">
<tr>
<td class="label">test1</td>
<td>5</td>
<td>2</td>
<td>7</td>
<td>1</td>
</tr>
<tr>
<td class="label">test2</td>
<td>9</td>
<td>15</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td class="label">test3</td>
<td>32</td>
<td>12</td>
<td>23</td>
<td>28</td>
</tr>
<tr>
<td class="label">test4</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tbody id="tfooter">
<tr>
<td>Total</td>
<td>145</td>
<td>120</td>
<td>157</td>
<td>162</td>
</tr>
</tbody>
</table>
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});