How do I enter a numeric number in sequence in a table? - javascript

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>

Related

Dynamically add column to table and it's td's

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>

make table display part to part

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

d3.js : get td value

I am new with d3.js
The problem i am facing is that i am unsure of how to get the value of td.
html
<table class="table">
<thead><tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
I read the documentation on d3.js but i couldnt find the documentation on how can i retrieve data from the table .
Let's say that i would want to append a div with background color (green) on Credit that has value of negetive , how could we achieve this
This is what i tried
let selection = d3.selectAll("tr")
console.log("Get Table " + selection)
let headerElement = selection.nodes()[0];
let output = selection.selectAll("td")
i tried to printout the value of selected column with console.log(output["0"][1])
but i am receving error.
Thank you in advance

Since D3 v4 selections are objects, not arrays anymore, so you cannot treat them like you did in output["0"][1].
The idiomatic way to loop a selection is using selection.each. For instance:
const tds = d3.selectAll("td")
.each(function() {
console.log(d3.select(this).text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
If you don't want another selection, d3.select(this).text() is the same of this.innerHTML.
Therefore, you can use the same each to set the "background color (green) on Credit that has value of negetive", as you said:
const tds = d3.selectAll("td")
.each(function() {
d3.select(this).style("background-color", this.innerHTML === "Positive" ? "green" : null)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>

How to hide table rows if Id = id

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>

Alternate Table Row Background Color Based on Column Value Changing

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

Categories