Hide cell with jquery when empty ( no content) - javascript

I am trying to hide empty cells with jquery but the code doesn't work
<script>
jQuery(document).ready(function() {
if(jQuery('.tabcontent_01_custom_property_fields').html())
{
( $("th:empty").text().length == 0) .css('display', 'none');
}
});
Any tips would be great.

You already have the :empty selector, which is enough. See the working fiddle:
HTML:
<body>
<table class="table">
<tr>
<td>Test</td>
<td></td>
<td>Test 2</td>
<td></td>
<td>Test 3</td>
</tr>
</table>
</body>
JS:
jQuery(document).ready(function() {
if(jQuery('.table').html())
{
( $("td:empty").css('display', 'none'));
}
});
https://jsfiddle.net/8vym5vk8/1/
You could even shorten the JS:
jQuery(document).ready(function() {
( $(".table td:empty").css('display', 'none'));
});
https://jsfiddle.net/8vym5vk8/2/

Related

How to get the first td value using jquery

I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.
<html>
<head>
<style type='text/css'>
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<table border="1" id="MyTable">
<tr>
<td></td> <td>blue</td>
</tr>
<tr>
<td></td><td>red</td>
</tr>
<tr>
<td></td><td>black</td>
</tr>
</table>
</body>
</html>
I tried with following script but it showing row counter as text. How to get the value of first td?
<script>
$("#MyTable").find('tr').each(function (i, el) {
$(this).find('td:eq(0)').each(function () {
console.log(window.getComputedStyle(this, ':before').content);
});
});
</script>
Based on this:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.
So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:
But this is result:
So generated content does not alter the document tree and you can't access to value of it.
There are lots of alternative you can do it:
$("#MyTable").find('tr').each(function (i, el) {
debugger
$(this).find('td:eq(0)').each(function (index, el) {
$(this).html(i+1)
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>
Update
You can rest number after each modification on your table:
function setnumber() {
$('#MyTable tbody tr').each(function (i) {
$($(this).find('td')[0]).html(i + 1);
});
}
$(".delete").click(function () {
$(this).closest('tr').remove();
setnumber();
});
setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>red</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>black</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
</tbody>
</table>
Probably, you want to put 1,2,3 in TDS on DOM.
You can do like this:
$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });
https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js
You can use child selector to select the child of tr
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();

Jquery from ouput element highlight matching element in table row

How to highlight
Victor and Steve....(and other from #output if is change)
Html
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
jquery
var gg = $('#output').text();
$(document).ready(function(){
$('table tr').each(function(){
if($(this).find('td').eq(1).text() == gg){
$(this).css('background','red');
}
});
});
here the JSFiddle
You can use includes() to check if string contains sub-string.
var gg = $('#output').text();
$('table tr').each(function() {
if (gg.includes($(this).find('td').eq(1).text())) {
$(this).css('background', 'red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>Victor</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>Steve</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>Michael</td>
<td>17</td>
</tr>
<tr>
<td>9</td>
<td>Michaela</td>
<td>20</td>
</tr>
</table>
If you change your jQuery to this:
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
That should solve it.
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
This is converting the gg variable into an array of names and then inside the each function we're checking if the name is in the array.
A "functional" style solution
var gg = $('#output').text()
$(document).ready(function(){
$('table tr').css('background', function(){
return (gg.indexOf($(this).find('td').eq(1).text())>=0 )? 'red' : 'transparent';
})
});

Add data attribute with value from self

I've got a table to which I'd like to add a attribute 'data-order' to every last child of every row. See the table below.
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
I'd like to add the value of the last td to the attribute.
Before : <td>255 500</td>
After : <td data-order"255 500">255 500</td>
I use $(this).text() to get the value from the td but it doesn't seem to work the way I thought. I get weird data with multiple table rows included. I use this Javascript code to add the attribute.
$(document).ready(function() {
$( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
});
</script>
What is wrong my code ? Thanks.
At this point this doesn't refer to your $( '#table_id tbody tr td:last-child')
I think you must declarate a var, something like this could help you
var $MyObject = $( '#table_id tbody tr td:last-child');
$MyObject.attr( 'data-order', $MyObject.text());
if you have multiple line in you table you could use this in a each loop.
Example case
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>255 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$( '#table_id tbody tr td:last-child').each(function(){
var $MyObject = $(this); // this here referer to the current object of the loop
$MyObject.attr( 'data-order', $MyObject.text());
});
You can do it like this
var lastTd = $( '#table_id tbody tr td:last-child');
lastTd.attr( 'data-order', lastTd.html());
Please take a look at below code snippet:
$(document).ready(function() {
$( '#table_id tbody tr').each(function(){
$(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>2551 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>2552 5002</td>
</tr>
</tbody>
</table>
Used to .each function as like this
$(document).ready(function(){
$('#table_id tr td:last-child').each(function(){
var thisText = $(this).text();
$(this).attr('data-order',thisText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#table_id tr td:last-child').each(function () {
$(this).attr('data-order', $(this).text());
});
});
You can simply use the data()
$('#table_id tr td:last-child').each(function(){
var text= $(this).text();
$(this).data('order',text);
});

Adding the numbers in table row using jquery [duplicate]

This question already has answers here:
How to turn NaN from parseInt into 0 for an empty string?
(18 answers)
Closed 7 years ago.
I want to add the numbers in the table cell without getting NaN.
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
Fiddle:
How it is possible?
Check this
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
col.each(function() {
colData=parseInt($(this).text(), 10);
if (colData) {
colTotal+=parseInt(colData);
}
});
$('#sample tr:last td').text(colTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
use isNaN() function like:
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
$(col).each(function()
{
colData=$(this).text();
colTotal+=isNaN(parseInt(colData)) ? 0: parseInt(colData);
});
$('#sample tr:last td').text(isNaN(colTotal) ? 0: colTotal);
});
DEMO
use $.isNumeric(colData)
updated your link
Just skip the blank values
$(document).ready(function() {
var colTotal=0;
$("#sample td").each(function()
{
if ($(this).text())
colTotal+=parseInt($(this).text());
});
$('#sample tr:last td').text(colTotal);
});

Javascript targeting tr element

Im trying to target elements inside of a table with the class '.income_table'. I want to toggle/untoggle a highlighted background color each time a element gets clicked. This isn't working:
<script>
$(document).ready(function(){
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
Is there a problem with my code?
Works for me : http://jsfiddle.net/mplungjan/xBzPW/
<style>
.income_table { background-color:red }
.toggled_tr { background-color:yellow }
</style>
<script>
$(document).ready(function() {
$(".income_table tr").click(function () {
$(this).toggleClass("toggled_tr");
});
});
</script>
<table class="income_table">
<tr>
<td>Row 1 cell 1</td>
<td>Row 1 cell 2</td>
</tr>
<tr>
<td>Row 2 cell 1</td>
<td>Row 2 cell 2</td>
</tr>
</table>
It looks right, you may need to target the TDs though and apply the class there. Try:
<script>
$(document).ready(function(){
$(".income_table tr td").click(function () {
$(this).siblings().toggleClass("toggled_td");
});
});
</script>

Categories