I am not sure why is my table cell is not animating after click on a button. I want the whole row to animate into a different colour in specific time.
$("#buttonObserve").click(function() {
$("#trl1").animate({
backgroundColor: "#FFD801"
}, 1000);
});
#tableLast {
border-collapse: collapse;
width: 80%;
}
#tableLast td,
#tableLast th {
border: 1px solid #ddd;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableLast" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr id="trl1">
<td id='tdl1'>1</td>
<td id='tdl2'>2</td>
<td id='tdl3'>3</td>
<td id='tdl4'>4</td>
</tr>
</table>
<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
2 Problems here:
First, you need to wrap javascript code inside $(document).ready.
Second, you need to import 'jquery.color.js' file.
Here's the working code.
$(document).ready(function(){
$("#buttonObserve").click(function () {
$("#trl1").animate({backgroundColor: "#FFD801"}, 1000);
});
});
<html>
<head>
<style>
#tableLast{
border-collapse: collapse;
width: 80%;
}
#tableLast td, #tableLast th{
border: 1px solid #ddd;
padding: 8px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<table id="tableLast" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr id="trl1">
<td id='tdl1'>1</td>
<td id='tdl2'>2</td>
<td id='tdl3'>3</td>
<td id='tdl4'>4</td>
</tr>
</table>
<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
</body>
</html>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
You need to import this js file to animate color.
Related
I'm trying to hide the whole div(where there's a table inside) when the result from filtering/searching thru the table is empty.
So far, I have this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th, .mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header, .mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
}
</script>
<! ––hide div that doesnt have any data––>
<script>
$(function(){
var hide = true;
$('#myTable td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
</script>
</body>
</html>
As you can see, although the table is properly searched, the div and the table that has no value in its <td> is still showing.
How can I hide the whole div if the table's <td> is empty while searching it?
Your first problem is that you had several elements with the same ID, e.g. <div id="myTable1div">. I had to give them each a separate ID.
I created a helper function, hideDivs(), which counts the number of rows which are set to display: none, and if there is just one of them (i.e. the header), then hide that corresponding <div>.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th,
.mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header,
.mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable2div">
<table id="myTable2" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function hideDivs() {
['#myTable1div', '#myTable2div'].forEach(function (id) {
// From https://stackoverflow.com/a/5325109/378779
if ($(id + ' tr:not([style*="display: none"])').length == 1) {
$(id).hide();
} else {
$(id).show();
}
})
}
function myFunction() {
var input, filter, table, tr, td, i, alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function (table) {
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
hideDivs();
}
// hide div that doesn't have any data
hideDivs();
</script>
</body>
</html>
Try checking if the element is rendered in the DOM before hiding it.
You can do this by if ($('#myTable1div').is(':visible'))
I am using Python to draft a Table for the mail. In the mail I will be needing to color the text if that text is of some text value. Say if the text contains "Successful" then the text will be colored as "GREEN". I am using the Python string template to make a HTML snippet.The $w__ are the variable which contains the text. I would like to change the colors of the text based on the text. Please help me out.
'''
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td>AM</td>
<td>$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td>$w32</td>
<td>$w33</td>
<td>$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td>$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
'''
s=Template(bdy).safe_substitute(w21=xxx[0][0],w22=xxx[0][1],w23=xxx[0][2],w24=xxx[0][3],w25=all[0][4],w26=all[0][5],w27=all[0][6],w28=all[0][7],
w29=all[0][8],w210=all[0][9],w211=all[0][10],w20m_3=all[0][11],
w31=xxx[1][0],w32=xxx[1][1],w33=xxx[1][2],w34=xxx[1][3],w35=all[1][4],w36=all[1][5],w37=all[1][6],w38=all[1][7],
w39=all[1][8],w310=all[1][9],w311=all[1][10],w20m_4=all[1][11])
You can use basic style to add class and append that class in td.
<style>
.success {
background: green
}
.error {
background: red
}
<style>
<td class="success">AM</td>
<td class="success">$w21</td>
<td class="error">$w21</td>
<!DOCTYPE html>
<html>
<head>
<title>XXXXX</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th,td{
border: 1px solid black;
text-align: center;
padding: 5px;
width: 7%;
}
.success {
background: green
}
.error {
background: red
}
</style>
</head>
<body>
<p>
<p2>Hi All,</p2>
<br>
<br>
<p2>SOME_TEXT</p2>
<table>
<thead>
<tr>
<th></th>
<th>22a</th>
<th>22r</th>
<th>29a</th>
<th>29c</th>
<th>ICAL</th>
<th>22g</th>
<th>22x</th>
<th>22hm</th>
<th>28a</th>
<th>20a</th>
<th>20b</th>
<th>20m</th>
</tr>
</thead>
<tbody>
<tr>
<td class="success">AM</td>
<td class="success">$w21</td>
<td>$w22</td>
<td>$w23 </td>
<td>$w24</td>
<td>$w25</td>
<td>$w26</td>
<td>$w27</td>
<td>$w28</td>
<td>$w29</td>
<td>$w210</td>
<td>$w211</td>
<td>$w20m_3<td>
</tr>
<tr>
<td>LA</td>
<td>$w31</td>
<td class="success">$w32</td>
<td>$w33</td>
<td class="error">$w34</td>
<td>$w35</td>
<td>$w36</td>
<td>$w37</td>
<td>$w38</td>
<td>$w39</td>
<td class="error" >$w310</td>
<td>$w311</td>
<td>$w20m_4<td>
</tr>
</tbody>
</table>
<p2>Best Regards</p2>
<br>
<br>
<p2>XXX ---- REGARDS(STATEMENT)</p2>
</body>
</html>
I am trying to create some conditional formatting using JavaScript and HTML.
Basically I have a table with the following fields:
table
system
timestamp
total_amount
amount_used
amount_free
What I want based on the value of the column amount_free to change the colour of the field.
In this case if my column amount_free is 0 € then I want to have the red colour on my cell.
For that I am using the following code:
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td>0 €</td>
</tr>
</table>
But it doesn't return any colour. Only the table without formating.
Can anyone help me?
$(document).ready(function() {
$('#table_id .amount_free_value').each(function() {
const value = $(this).text().split('€')[0];
if (value == 0) {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free_value">0 €</td>
</tr>
</table>
What you are trying to check is somehow wrong, you have the currency inside the text string. You don't have an id for the table and neither a class or some attribute on the amount_free value from the table.
You can do it in this way.
you have some typo in your code (style part), your table also miss the ID property and there's no TD with the amount_free class on it.
Try with:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$('#table_id td.amount_free').each(function(){
if ($(this).text() == '0 €') {
$(this).css('background-color','#f00');
}
});
});
</script>
</head>
<br><br>
<style>
table, td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table, th {
border: 1px solid black;
}
th, td {
padding: 3px;
}
th {
text-align: left;
}
th {
background-color: #f2f2f2;
}
td{
font-family: arial;
font-size: 10pt;
}
</style>
<table style=width:100% id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
You need to provide id for table tag and class name for your specific td tag in your example. So your html code would be like below:
<!–– add id to table ––>
<table id="table_id" style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<!–– add class to td ––>
<td class="amount_free">0 €</td>
</tr>
</table>
you are checking for a table with id table_id which doesn't exist. You are further checking a td-element with the class amount_free which also doesn't exist.
If you add ID and class then it will work.
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}
Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>
You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....
Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.
you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/