How to select html cells and highlight by dragging like calendar - javascript

Assume we have tables like below.
If I mousedown at 2 then mouseup at 5,my desired result is cells 2,3,4,5 is highlighted like calendar view.
the other case is mousedown at 5 and then mouseup at 3, cells3,4,5 is highlitened.
How can I get such result? I tried by using toggle class but stacked now.
If someone has experienced such issues,please let me know.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>


Here you go, but there is an use of JQUERY.
$(document).ready(function(){
var first;
var second;
var list = [];
$("td").click(function(){
if(first == null){
first = this.id;
}else{
second = this.id;
for(var i = first;i <= second; i++){
changecolor(i);
}
}
});
function changecolor(id){
$("#"+id).css("background-color","yellow");
}
$("button").click(function(){
$("td").each(function(){
$(this).css("background-color","white");
first = null;
second = null;
});
});
});
table tr td{
border:1px solid black;
padding:10px;
font-size:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
</tr>
</table>
<button>Reset</button>

Related

How to remove class at serial cells in html tables

Some event were registered in calendar like html tables.
I would like to unregister these event by clicking them.
To realize this,I would like to removeclass continuous cells. like
When we click3or4,then 3,4 cell's class will be removed.
When we click 13or14or15,then 13,14,15 cell's class will be removed.
When we click 9, then only 9 cell's class will be removed.
Is it possible?
and are there any way to realize it?
Thanks
$(function() {
$("td").click(function() {
$(this).removeClass();
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

You can first use .closest() to target the parent tr element then use .find() to target all the element with the class aqua to remove them:
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

If you just change your script like below. Your code will work perfectly according to your requirement.
$(function() {
$("tr").click(function() {
$(this).children().removeClass();
});
});
or else you can change like below as well. It also work perfectly.
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
Best Answer is using second method.

You can simply target only the cells having that aqua class to achieve this, instead of targeting every cell. Then using .closest('tr') find the closest parent tr for the clicked cell and after that using .find('td.aqua') find all the cells having the class aqua and then finally remove the class from each of them.
$(function() {
$("td.aqua").click(function() {
$(this).closest('tr').find('td.aqua').removeClass('aqua');
});
});
td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

if you want to remove aqua class when clicking each row then use this
$(function() {
$("tr").click(function() {
$(this).children().removeClass('aqua');
});
});
OR when clicking on the cells themselves use this
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

How to get a running sum on HTML table?

I searching a solution for give the running sun to a editable html table, like a spreadsheet:

Hi here is a basic example of what you want using :
The HTML content editable property.
A css class to append a focusout event to the table cell.
A simple loop to sum all values when one value changes.
$('#tbodyTest >tr').on('focusout', 'td.editable', (e) => {
let target = $(e.target),
parent_row = $(e.target).closest('tr'),
previous_row = parent_row.prev();
setTimeout(() => {
if (!isNaN(target.text())) {
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}else{
target.text("0");
parent_row.find('td').last().text("0");
$('#tbodyTest').children('tr').each((i,e)=>{
$(e).find('td').last().text(Number($(e).find('td:eq(2)').text()) +Number($(e).prev().find('td').last().text()))
})
}
})
})
.editable {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test" border=1>
<thead>
<th>date</th>
<th>desc</th>
<th>cost</th>
<th>running sum</th>
</thead>
<tbody id="tbodyTest">
<tr>
<td>01-01-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'>1000</td>
<td>1000</td>
</tr>
<tr>
<td>01-02-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-03-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
<tr>
<td>01-04-2019</td>
<td>a</td>
<td class="editable" contenteditable='true'></td>
<td></td>
</tr>
</tbody>
</table>
Keep in mind that this is a basic example and you will probably add more stuff according to your needs since your ask is simple as well.
Hope it helps

Anyone still looking to this.
$('tr').each(function(index, el) {
if (index == 0) {
$(this).find('.running-balance').text($(this).find('.amount').text());
} else {
var prevRow = $(this).prev();
var prevBalance = Number(prevRow.find('.running-balance').text());
var currentAmount = Number($(this).find('.amount').text());
var newBalance = prevBalance + currentAmount;
$(this).find('.running-balance').text(newBalance.toFixed(2));
}
});
td,
th {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Description</th>
<th>Amount</th>
<th>Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td class="amount">100</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>b</td>
<td class="amount">150</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>c</td>
<td class="amount">125</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>d</td>
<td class="amount">205</td>
<td class="running-balance"></td>
</tr>
<tr>
<td>e</td>
<td class="amount">50</td>
<td class="running-balance"></td>
</tr>
</tbody>
</table>

Alternating color by column value HTML?

I have a HTML table like this.
<table class="TableA">
<tbody>
<tr>
<td>1</td>
<td class="a">aa</td>
</tr>
<tr>
<td>2</td>
<td class="a">aa</td>
</tr>
<tr>
<td>3</td>
<td class="a">bb</td>
</tr>
<tr>
<td>4</td>
<td class="a">cc</td>
</tr>
<tr>
<td>5</td>
<td class="a">dd</td>
</tr>
<tr>
<td>6</td>
<td class="a">ee</td>
</tr>
<tr>
<td>7</td>
<td class="a">ee</td>
</tr>
</tbody>
</table>
How can i alternating color by column <td class="a"> value html?
This result like this
I have tried this JS code.
My idea is to find all ("td.a") and compare string. If true bgColor = "red".
$(".TableA").each(function () {
if ($(this).find("td.a")[0].innerHTML == $(this).find("td.a")[1].innerHTML) {
$(this).find("td.a")[0].bgColor = "red";
} else {
$(this).find("td.a")[0].bgColor = "white";
}
});

To highlight consequence rows with same text, you can use the next() to compare the next element and add class accordingly.
$(".TableA tr").each(function() {
let now = $(this).find('td').last();
let next = $(this).next().find('td').last();
if (now.text() == next.text()) {
now.addClass('red');
next.addClass('red');
}
});
.red {
background: red;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<table class="TableA">
<tbody>
<tr>
<td>1</td>
<td class="a">aa</td>
</tr>
<tr>
<td>2</td>
<td class="a">aa</td>
</tr>
<tr>
<td>3</td>
<td class="a">bb</td>
</tr>
<tr>
<td>4</td>
<td class="a">cc</td>
</tr>
<tr>
<td>5</td>
<td class="a">dd</td>
</tr>
<tr>
<td>6</td>
<td class="a">ee</td>
</tr>
<tr>
<td>7</td>
<td class="a">ee</td>
</tr>
</tbody>
</table>

If you want to make two sibling td that has same innerHTML to be red background, you can try this code, it's easy to understand:
const testArray = $(".TableA td.a")
testArray.map(function(index) {
// Be careful out of the array
if (index === testArray.length - 1) return 0;
if (
testArray[index].innerHTML ===
testArray[index + 1].innerHTML
) {
testArray[index].style.background = "red";
testArray[index + 1].style.background = "red";
} else {
testArray[index].style.background = "white";
}
});

How to get total sum in multiple tables

I have a multiple table and I want to get the total per table. Please see the demo in fiddle.
var total = 0;
$("table").each(function(i){
total += +$('.a', this).text() || 0;
console.log( 'total: '+total );
$("#subtotal", this).text( total );
//console.log( '-'+$('.a', this).text() );
});
https://jsfiddle.net/juandela/6r1g30dx/2/

You need to move var total=0 inside the table loop so it resets for each table
Then you need to loop over each cell to get individual cell's text.
The problem with getting all $('.a', this).text() is it concatenates all elements text into one string which is why you see numbers like "1357" as total in first table
Finally you can't repeat ID's in page so change subtotal to a class
$("table").each(function(i) {
var total = 0;
$('.a', this).each(function() {
total += +$(this).text() || 0;
});
$(".subtotal", this).text(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="a">9</td>
<td>10</td>
</tr>
<tr>
<td class="a">11</td>
<td>12</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>

Jquery/JS Select last td in each line which don't have a specific class

I have the following HTML table:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
I would like to get all last elements which don't have the "treegrid-hide-column" class in each line.
How can in do that in CSS or JS ?
I tried doing that but it doesn't works well.
function addRightBorderOnTreetable() {
var arr = $('.treegridCustom tbody tr td:last-child');
for (var i=0; i<arr.length; i++) {
var currentEl = arr[i];
if ( !$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
}
}
}

CSS doesn't have this feature, but you can do it with jQuery:
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
$("tr").each(function() {
$(this).find("td:not(.treegrid-hide-column):last").each(function() {
$(this).css('border-right', '1px solid #bfbfbf');
});
});
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
We have to go row-by-row because there's no CSS "last element not matching this class", and jQuery's :last applies to the whole set, not the set at each level of thes elector.

If you added a class to your preferred td ?
<table>
<tbody>
<tr>
<td>1</td>
<td class="right-border">2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td class="right-border">5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td class="right-border">8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
And then change the css
.right-border {
border-right: 1px solid #bfbfbf;
}
Or with a js function
function addRightBorderOnTreetable() {
var el = $('.treegridCustom tbody tr .right-border');
el.css('border-right', '1px solid #bfbfbf');
}

you might need to run for loop like this. I think this is what you want to achieve.
$(document).ready(function() {
addRightBorderOnTreetable();
});
function addRightBorderOnTreetable() {
$.each($('tr'),function(){
var arr2 = $(this).find('td');
var j = arr2.length;
for(j=arr2.length; j>-1;j--){
var currentEl = arr2[j - 1];
if (!$(currentEl).hasClass("treegrid-hide-column") ) {
$(currentEl).css('border-right', '1px solid #bfbfbf');
return;
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="treegrid-hide-column">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td class="treegrid-hide-column">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td class="treegrid-hide-column">9</td>
</tr>
</tbody>
</table>

So simple use nth-last-child() here
<script>
$(document).ready(function(){
$( 'table tbody tr td:nth-last-child(2)').css('border-right', '1px solid #bfbfbf');
});
</script>
Jsfiddle

table tr td:not(.treegrid-hide-column):last-child {
border-right: 1px solid #bfbfbf;
}

Categories

Resources