I want to be able to add a class to a TR element, dependent on the value of the first TD element.
For example:
If I have the following array of data:
[1,2,3,4]
[5,6,7,8]
Where each array represents a tr, with each element being a td, I would like to highlight the TR where the first TD equals 5 for instance.
How would i go about doing this?
Thanks,
Below example can help!
$(function() {
var tr = $('tr').find('td:first-child');
tr.each(function() {
if ($(this).text() == 5)
$(this).parent('tr').addClass('highlight');
});
});
tr.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<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>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>
</table>
I managed to solve this by using the fnRowCallback function
'fnRowCallback': function(nRow, aData, iDisplayIndex) {
$(nRow).css('cursor', 'pointer');
$(nRow).prop('title', 'Select Company');
if (aData.CompId === "COMP01") {
$(nRow).find('td').addClass('selectedCompany');
}
return nRow;
},
You can use first-child and :contains with Jquery
$('td:first-child:contains("5")').parent('tr').addClass('selected')
tr.selected {
background: yellow;
}
tr.selected td:first-child {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
</tr>
</table>
Edit Note:: This will select all first td with 5 on the string
Assume the content of the desired row td is "two", either of these would work:
$(document).ready(function() {
var findMe = "two";
$('#mytable').find('tr').filter(function(index) {
var isTwo = $(this).find('td').eq(0).text() === findMe;
return isTwo;
}).addClass('highlight');
$('#mytable').find('tr').find('td:first').filter(':contains("' + findMe + '")').parent('tr').addClass('highlight');
});
Related
I have a row in a table with the head of the row and 96 cells.
Each row is clickable by the following function
$("#table tr").click(function(){});
Now by getting value from 0 to 96, I need to get the td in the place X and do a colspan on it.
As in the form, I get value 40 I need to make the colspan on the 40th td in the clicked row.
How can I implement something like that in JavaScript or jQuery?
Thank's to Pete comment I've got how to get td to which change the attribute, the problem now is if I colspan the cell the table become deformed as on the screen
You can try something like this. You need to add colspan attribute first and then need to remove last cells as below:
$(document).ready(function(){
$("#tables tr").click(function() {
let position = 2;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
$(`td:eq(${position+colspan})`, this).nextAll().remove();
});
});
Hope it helps you ;)
You could use the jQuery selector :eq() to get the position you want with the prop() method that will set the colspan attribute, like :
$("#table tr").click(function() {
let position = 5;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
I'm trying to remove any tr from table that has less than 4 td inside.
So for example, in this table I want second tr to go away:
HTML
<table>
<tbdy>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
I'm trying with something like this
jQuery
if ($('table tbody tr td').length >= 4) {
//4 i ok so do nothing
} else {
$(this).parent("tr").remove();
}
But I getting nowhere with this.
Any help?
Use jQuery :has() selector with :not() and :nth-child() pseudo-class selector.
$('tr:not(:has(:nth-child(4)))').remove()
<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>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Or alternatively, use filter() method to filter out element only contains td less than 4 and remove.
$('tr').filter(function() {
return $(this).children('td').length < 4;
}).remove()
<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>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
This should work:
$('table tbody tr').each(function() {
var $tr = $(this);
if ($tr.find('> td').length < 4) {
$tr.remove();
}
});
Your structure should be :
<table>
<tbody>
<tr>
And you can select it with :
$('table tbody tr')
To get all tr with less than 4 columns you should loop through them.
Your final code should be :
$('table tbody tr').each(function() {
var row = $(this);
if (row.find('td').length < 4) {
row.remove();
}
});
I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>
You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<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>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/
We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)
Im not sure this is what you were looking for, but it sounded like a cool idea. Heres what I came up with for a "Carousel Effect on a Table" (which is what i think you were asking). Run the code snippet to see the effect. You might need to alter the css a little to get a seamless scroll effect.
var $table = $('.table-wrapper table');
var leftTimeout, left = $('.left');
function scrollLeft(){
$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50);
$.each($table.find('tr'),function(){
$(this).children().last().detach().prependTo(this);
});
}
left.mousedown(function(){
scrollLeft();
leftTimeout = setInterval(function(){
scrollLeft();
}, 500);
return false;
});
$(document).mouseup(function(){
clearInterval(leftTimeout);
return false;
});
var rightTimeout, right = $('.right');
function scrollRight(){
$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50);
$.each($table.find('tr'),function(){
$(this).children().first().detach().appendTo(this);
});
}
right.mousedown(function(){
scrollRight();
leftTimeout = setInterval(function(){
scrollRight();
}, 500);
return false;
});
$(document).mouseup(function(){
clearInterval(rightTimeout);
return false;
});
.table-wrapper
{
border: 1px solid red;
width: 200px;
height: 150px;
overflow:hidden;
}
table
{
border: 1px solid black;
margin-right: 20px;
}
td
{
min-width: 50px;
height: 20px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
<table>
<tr>
<th>1h</th>
<th>2h</th>
<th>3h</th>
<th>4h</th>
<th>5h</th>
<th>6h</th>
<th>7h</th>
<th>8h</th>
<th>9h</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
<button class='left'><</button>
<button class='right'>></button>
I have a table that include rows that any row has a attribute which called entity-state. I have get all td from rows that entity-state !== 'deleted'.
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
I want get all td values that are in rows that entity-state is added only.
You can use the attribute selector for this:
$('tr[entity-state="added"]');
// or
// $('tr:not([entity-state="deleted"])');
You should note that entity-state is a non-standard attribute and will mean your HTML is invalid. To solve this you should use a data-* attribute instead:
<tr data-entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr data-entity-state="added">
<td>3</td>
<td>4</td>
</tr>
$('tr[data-entity-state="added"]');
It's also possible to achieve what you need using filter(), which is useful when using data-* attributes as changing their values through jQuery does not update the DOM.
var $enabledRows = $('tr').filter(function() {
return $(this).data('entity-state') == 'added';
// or:
// return $(this).data('entity-state') !== 'deleted';
});
You can use combination of attribute equals selector and :not() (or not()) selector
$('tr:not([entity-state="deleted"])')
or
$('tr').not('[entity-state="deleted"]')
$('tr:not([entity-state="deleted"])')
// or $('tr').not('[entity-state="deleted"]')
.css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
You can use not selector with attribute selector,
$("tr:not([entity-state='deleted']) td").each(function() {
console.log($(this).text())
});
$('table tr[entity-state=added]').each(function(i,v){
var $td = $(this).find('td')
console.log($td.text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
Use the attr selector for this