We Keep Coding

How do I enter a numeric number in sequence in a 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>

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>

Loop table to even row amount in JQuery

The question I have a table pulling from the backend for events, will list out in the font in 3 different column with specific categories, but sometimes only have 1 event or 2, but I need to at least display 3 items.
So I try to use jQuery each function to check how many rows in the table if only have 1 add 2 rows if only have 1 row add 2 instead.
So the table will be same height no matter how many events display.
My code doesn't work correctly, so I was hoping anyone can help me out with this.
Here's my sample code:http://jsfiddle.net/s2devfrg/
Here's the jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if(number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})

The selector you are using on .each is wrong. There are no elements with the passed id.
Also there are couple of blank tr's in your html which I have removed.
Try this code below:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if(number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
})
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="table-amount">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated fiddle link

I have reviewed you sample code, first of all kindly note that in jQuery
when you find tr it will count total number of rows including tr inside thead.
So your
total counts are always one more than actual rows.
Second thing you should not append just tr you should provide same structure
as in
your existing rows.
Also in first table structure you had one extra th may be typo.
In first and third table structure you have one tr extra with empty
structure
instead, you should have same structure as you have for others.
here is the link for modified JS Fiddle link
https://jsfiddle.net/patelmurtuza/kj8zgqad/

How to copy rows and paste selected rows in same table

Here i want to copy rows and must be able to paste the rows below
i want to add functionality to my table as in this fiddle
http://jsfiddle.net/Lfjuapub/1/
Please find my fiddle
https://jsfiddle.net/zrcoLyeg/6/
<table id="tblColumnSchedule" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">User</th>
<th data-hide="phone, tablet">Label</th>
<th data-hide="phone, tablet">Profile</th>
<th data-hide="phone, tablet">Location</th>
<th data-hide="phone, tablet">Start</th>
<th data-hide="phone, tablet">End </th>
</tr>
</thead>
<tbody>
<tr>
<td>s1</td>
<td>w10x22</td>
<td>A1</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>s2</td>
<td>w10x24</td>
<td>A1.1</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
For example if i select 2 rows cloumns like Location, Start , End,
i must be able to paste selected rows in 3 rows.
Any help is highly appiceable.

Try using an external library like handsontable.

jQuery live filtering, how do I return entire rows when matched?

I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.

As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>