In my code, when you click on the first <td>, it's checkbox gets selected. But my goal is checkbox should get selected by tr click. So when I click on any <tr> its checkbox will be selected. To do this I already tried to replace on click class ".checktd" to ".odd" but this does not work.
Any idea how can I achieve that?
$(".checktd").on("click", function(e) {
if (this != e.target) {
return;
}
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
</body>
</html>
JsFiddle link if needed.
Modify the this!=e.target And check if it is a checkbox or not.
Change your selector from ".checktd" to "table tr". I would suggest you to use a more specific selector by adding class on table or on tr.
$("table tr").on("click", function(e) {
if($(e.target).is("input[type='checkbox']"))
return;
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
This will work for you
I just removed this code - if (this != e.target) { return; } from your fiddle.
And for following the default action if you clicked on a checkbox I have used event.target.type for checking you clicked a checkbox, This worked fine for me.
$(".odd").on("click", function(e) {
console.log(event.target.type);
if(event.target.type != 'checkbox') {
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Hope this was helpful for you.
On click of tr find the input element with name attribute and check if it is checked. If checked then uncheck it using prop else viceversa
$("tr").on("click", function(e) {
if ($(this).find('input[name="checkItem"]')[0].checked) {
$(this).find('input[name="checkItem"]').prop('checked', false)
} else {
$(this).find('input[name="checkItem"]').prop('checked', true)
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Check the JsFiddle with Changes
$("table td").on("click", function (e) {
if (this != e.target) { return; }
var check = $(this).parent("tr").find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
Solution
Related
I have list of filter table with jQuery. If user is searching the data that existed in the table it will filter and displayed the data. But if user search data that not existed in the data I want to display the not found. How to I displayed the not found in the filter function ?
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
// select notFound row
var notFound = $("#notFound")
// make it hidden by default
notFound.hide()
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase()
// select all items
var allItems = $("#myTable tr")
// get list of matched items, (do not toggle them)
var matchedItems = $("#myTable tr").filter(function() {
return $(this).text().toLowerCase().indexOf(value) > -1
});
// hide all items first
allItems.toggle(false)
// then show matched items
matchedItems.toggle(true)
// if no item matched then show notFound row, otherwise hide it
if (matchedItems.length == 0) notFound.show()
else notFound.hide()
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr id="notFound"><td colspan="3">Not Found</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that?
How can i check if a td is empty?
You can use :empty selector:
Demo:
//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());
table, th, td {
border: 1px solid black;
}
table tr > td:empty {
background-color: yellow;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>May</td>
<td> </td>
</tr>
</table>
You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.
Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.
$(document).ready(function () {
$("table td").each(function (index, eachCell) {
if ($(eachCell).html().trim().length === 0) {
$(eachCell).addClass("empty-cell");
}
});
});
.empty-cell {
background-color: red;
}
td {
border: 1px solid #ddd;
padding: 5px;
}
td:empty {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td> </td>
</tr>
</tbody>
</table>
I would like to count class changed cells in each rows.
My desired result is like below.
are there any way to count?
Thanks
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua')
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
You could do a foreach in each tr and calculate the tds inside it that have the 'aqua' code:
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
recalculate();
})
function recalculate() {
$('tr').each(function(index, tr) {
let result = $(tr).find('td.click.aqua').length;
$(tr).find('.result').text(result);
});
}
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td class="result">0</td>
</tr>
</table>
Are you just interested in counting the cells with class .aqua or the number of times a cell toggles?
//number of cells with `.aqua` class
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( $(this).parent().find('.aqua').length );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
To count the number of times the .aqua class toggles you would have to increment the previous value, zero if none.
//count the number of times `.aqua` toggles
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
var $ = jQuery;
$('.click').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('aqua');
$(this).siblings('.noborder').next().text( +$(this).parent().find('td:last').text() + 1 );
})
td {
border: solid 1px black;
padding:5px;
}
table {
border-collapse: collapse;
}
.noborder {
border: none;
padding: 5px 8px;
}
.aqua {
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class=click>1</td>
<td class=click>2</td>
<td class=click>3</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>4</td>
<td class=click>5</td>
<td class=click>6</td>
<td class="noborder"></td>
<td></td>
</tr>
<tr>
<td class=click>7</td>
<td class=click>8</td>
<td class=click>9</td>
<td class="noborder"></td>
<td></td>
</tr>
</table>
I want to hide if the hobby doesn't have value (empty). But if the hobby has value is still show. How to condition it? I try using jQuery.
$("tr:last-child td:last-child").css("font-weight","bold")
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You can hide the .parent() tr if the .text() of the td is blank.
$("tr:last-child td:last-child").each(function(index, td) {
if($(td).text() === ""){
$(td).parent().hide();
}
});
table {
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
tr:last-child td:last-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You need to use text() to get the text of td
$("tr:last-child td:last-child").each(function(index,element){
$(element).css("font-weight","bold");
});
$("tr:last-child td:last-child").each(function(index,element){
if($.trim($(element).text()).length == 0){
$(element).parent().hide();
}
});
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
change this:
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
to:
if($("tr:last-child td:last-child").text().length < 1){
$("tr:last-child").hide()
}
Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question.
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example:
Parent A
Child 1
Child 2
Parent B
Parent C
Child 1
I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color.
Please see the included snippet for an example of what I'm trying to achieve.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentEven {
background-color: #c294fa;
}
.oddChild {
background-color: #f2c4fa;
}
.evenChild {
background-color: #d8bbfd;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="oddChild">
<td>A1</td>
</tr>
<tr class="oddChild">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="oddChild">
<td>C1</td>
</tr>
<tr class="oddChild">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="evenChild">
<td>D1</td>
</tr>
<tr class="evenChild">
<td>D2</td>
</tr>
</tbody>
</table>
I tried using CSS pseudo-selectors, but no luck.
.parent:nth-child(odd) {
background-color: green;
}
.parent:nth-child(even) {
background-color: blue;
}
The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children.
Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?
Is there any reason not to use multiple <tbody>s?
Grouping rows can make it easy.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
tbody:nth-child(odd) > tr { /* odd child */
background-color: #f2c4fa;
}
tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
background-color: #eb94fa;
}
tbody:nth-child(even) > tr { /* even child */
background-color: #d8bbfd;
}
tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
background-color: #c294fa;
}
<table>
<tbody>
<tr>
<td>Parent A</td>
</tr>
<tr>
<td>A1</td>
</tr>
<tr>
<td>A2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent B</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent C</td>
</tr>
<tr>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent D</td>
</tr>
<tr>
<td>D1</td>
</tr>
<tr>
<td>D2</td>
</tr>
</tbody>
</table>
why not do some javascript?
var RowNumber = 0,
for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
this.setAttribute('class', 'even');
} else {
this.setAttribute('class', 'odd');
}
});
create the even class and odd class and give each tr an id
*This is a note: Set x to equal the amount of rows in your table.
OR do a switch statement, I prefer a good ol' if statement but Switch could work just as well :)
Check this solution: http://fiddle.jshell.net/manzapanza/6vjLm0td/
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
background-color: #F9E1DC;
}
.parentEven {
background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
background-color: #EEE5FA;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="parentOdd child">
<td>A1</td>
</tr>
<tr class="parentOdd child">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="parentOdd child">
<td>C1</td>
</tr>
<tr class="parentOdd child">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="parentEven child">
<td>D1</td>
</tr>
<tr class="parentEven child">
<td>D2</td>
</tr>
</tbody>
</table>