Develop Reference

Trying to get a table to appear with Onclick

Hi I have a table that looks like this which is mainly php but sadly i have to make it that way:
if (!isset ($_SESSION['Saved_contacts']))
$Kontakte = array (
array ("Hr.", "Fruehauf", "Dennis", "13.02.2002", "Brucknerweg 34", 5212, "Hausen", '<u>3.6</u>'),
array ("Fr.", "Kaufmann", "Katharina", "04.03.2002", "Neubertbogen 24", 1680, "Romont", "Durchschnitt"),
array ("Hr.", "Fiedler", "Marcel", "08.16.2002", "Via Stazione 98", 8143, "Stallikon", "Durchschinitt"),
array ("Hr.", "Oster", "Tim", "08.26.2002", "Via delle Vigne 98", 1773, "Vuaty", "Durchschinitt"),
array ("Fr.", "Eichelberger", "Tanja", "07.22.2002", "Semperweg 6", 4223, "Blauen", "Durchschinitt"));
else // Falls Session-Variablen bereits vorhanden => diese nehmen!
$Kontakte = $_SESSION['Saved_contacts'];
?>
<div style="width: 80%; min-width: 550px">
<h2>Kontakt des Schülers ...</h2>
<table>
<tr>
<th>Nr.</th>
<th>Anrede</th>
<th>Name</th>
<th>Vorname</th>
<th>Geburtsdatum</th>
<th>Adresse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Durchschnitt</th>
</tr>
<?php
for ($i=0; $i < count($Kontakte); $i++) {
echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
"<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
"<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . "<td onclick=\"show(\"example\");\">".$Kontakte[$i][7]."</td>" . " <td></tr>";
}
?>
</table>
and Im trying to get this table:
<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="" id="example">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6
<th>
</tr>
</table>
<div>
</div>
To appear via an onclick method with javascript so i used this code but for some reason it doesn't seem to work, im not sure if the show function in the table is not working or is the javascript code not working.
<script>
function show(example) {
var x = document.getElementById(example);
if (window.getComputedStyle(x).visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
It has been already identified on the last line in the first table but for some reason it doesn't appear. Is my onclick code wrong?

Are you getting any Console errors in the browser?
Because if you echo
"<td onclick=\"show(\"example\");\">"
it will output
<td onclick="show("example");">
As you can see, the second " will end the onclick attribute, so JS will try to execute the command show( when the click occurs, which clearly isn't valid. I would expect it to cause a
Uncaught SyntaxError: Unexpected end of input
error when you try to click on it.
You'd either need to escape the inner double-quotes, or more simply just use single-quotes round the string in JS, since it allows that:
<td onclick=\"show('example');\">"
will output
<td onclick="show('example');">
when you echo it.
Another, arguably neater alternative is to stop using old-fashioned inline event handlers, and start using addEventListener instead.
If you give your <td>s a class, you can then set one listener for them all, since it seems you want to open the same table for all of them (they're generated by a loop so I assume there will be several on the page):
HTML/PHP:
<td class="showTable">
Javascript
document.addEventListener('DOMContentLoaded', function() {
var tds = document.querySelectorAll(".showExample");
tds.forEach(function(td) {
td.addEventListener('click', function(e) {
var x = document.querySelector("#example");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
});
});
});
Also it would probably make more sense if the table was hidden initially.
Working demo:
document.addEventListener('DOMContentLoaded', function() {
var tds = document.querySelectorAll(".showExample");
tds.forEach(function(td) {
td.addEventListener('click', function(e) {
var x = document.querySelector("#example");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
});
});
});
<table>
<tr><td class="showExample">Example</td></tr>
<tr><td class="showExample">Example</td></tr>
</table>
<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="visibility:hidden" id="example">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6
</th>
</tr>
</table>
<div>
</div>
</div>
</div>

How to change color of a cell of table in html

I have a table of items. How do I make a cell turn color, lets say to red if the item is equal to 0
The ID of the table is myTable. I don't know how I should do this in javascript. I have added an id:
<td id="quantity"><?php echo e(($row['Quantity'])); ?></td>
function ChangeColor(){
.... //what goes here
}

You'd want to do this in PHP at run time, not in JavaScript like you hint at:
For example,
<?php
$backgroundColor = $row['Quantity'] == 0 ? 'red' : 'none';
echo '<td id="quantity" style="background-color: ' . $backgroundColor .'">' . e(($row['Quantity'])) . '</td>';
?>

Use class instead of id
<td class="quantity"><?php echo e(($row['Quantity'])); ?></td>
then select the <td> that has the "quantity" class, and evaluate their content
document.querySelectorAll('td.quantity').forEach(e => {
if( Number(e.textContent) < 0)
e.classList.add('negativeQtty')
})
then declare a css class negativeQtty
.negativeQtty {
background-color: red;
}

You can use Bootstrap background class
<td id="quantity"class="p-3 mb-2 bg-primary text-white"><?php echo e(($row['Quantity'])); ?></td>

This is a code javascript if you want use a javascript.
Need a call with cell of th then give a cell.innerHTML.
This example
var th = document.querySelectorAll('th')
for (let cell of th) {
if(cell.innerHTML === '6'){
cell.style.backgroundColor = 'green'
}
if(cell.innerHTML === '0'){
cell.style.backgroundColor = 'red'
}
}
table {
margin-bottom: 1em;
border-collapse: collapse;
}
td,
th {
padding: .25em .5em;
border: 1px solid #333;
font: .75em "Verdana";
}
<table id="Table">
<tbody>
<tr>
<th>Data</th>
<th>Number</th>
<th>Total</th>
</tr>
<tr>
<th>Product</th>
<th>0</th>
<th>6</th>
</tr>
<tr>
<th>Product2</th>
<th>5</th>
<th>0</th>
</tr>
</tbody>
</table>

How to loop through a table and get the td elements to follow a condition

I just want make so it the tr hides when the td does not follow the requirements, tried with jQuery and JavaScript, don't know what's wrong.
$(document).ready(function(){
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide;
}
else {
$(this).hide;
}
});
});

You can do this.
Hope this will help you.
$(document).ready(function() {
var value4 = 2;
var value5 = 4;
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide();
} else {
$(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td price_search="3">10</td>
<td price_search="2">20</td>
<td price_search="3">30</td>
</tr>
</table>

I am going to go out on a limb here and make broad assumptions on content not in the question.
Your .hide; is invalid syntax
You are missing value for two variables value4 and value4 which frankly are not well named variables at all. I will make an assumption that those are better named and that they come from somewhere during the page rendering.
I make an assumption that you have something you want to filter/hide by those upper/lower price points.
I make the assumption the attribute might contain values that need to be parsed (not a number as they are)
var lowerPricePoint = .45;
var upperPricePoint = 5.25;
$(function() {
$("td").filter('[price_search]').each(function() {
// parse out a price from perhaps formatted values
let price = Number.parseFloat($(this).attr("price_search").replace(/\$|,/g, ''));
// toggle visibility of the row
$(this).closest('tr').toggle(price > lowerPricePoint && price < upperPricePoint);
});
});
td {
border: solid black 1px;
padding: 0.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr>
<td>Wear it</td>
<td price_search="123.13">Shoes</td>
</tr>
<tr>
<td>Drive it</td>
<td price_search="$23,123.13">Car</td>
</tr>
<tr>
<td>Drink it</td>
<td price_search="3.13">Beet Juice</td>
</tr>
<tr>
<td>Eat it</td>
<td price_search="12.13">Can of expensive corn</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="35">Radish</td>
</tr>
<tr>
<td>Use it</td>
<td price_search="1.45">Paper towel</td>
</tr>
<tr>
<td>Plain</td>
<td price_search="$1.87">Butter</td>
</tr>
<tr>
<td>Herb</td>
<td price_search="$2.45">Butter</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="15">Gum</td>
</tr>
</table>

Make table row TR a link

I have a table made in PHP with the echo command because it's to make a calendar.
I want each row in the calendar to become a link (to select each week).
I know I can use JavaScript but it wont work when it's in an echo command for some reason.
Is there another way to do this?
BTW: I don't want the text to become links just all the cells in the row to become links.
PLEASE let me know if this is possible or what the alternatives are.
here is my code I have so far.
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #b8d1f3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #ffff99;
}
h3 {
color: #FFF;
}
</style>
.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8" align="center" bgcolor="#666666"><h3>January</h3></td>
</tr>
<tr>
<td width="30" align="center" bgcolor="#0099FF">W</td>
<td width="30" align="center" bgcolor="#0099FF">S</td>
<td width="30" align="center" bgcolor="#0099FF">M</td>
<td width="30" align="center" bgcolor="#0099FF">T</td>
<td width="30" align="center" bgcolor="#0099FF">W</td>
<td width="30" align="center" bgcolor="#0099FF">T</td>
<td width="30" align="center" bgcolor="#0099FF">F</td>
<td width="30" align="center" bgcolor="#0099FF">S</td>
</tr>
<?php
$timestamp = mktime(0,0,0,1,1,$year);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
$week = date("W", $timestamp);
echo "<table class='hoverTable'>";
for ($i=0; $i<($maxday+$startday); $i++) {
$date = mktime(0, 0, 0, 1, $i - $startday + 1, $year);
//want to make this row below a link
if(($i % 7) == 0 ) echo "<tr><td width='30'>" . date('W', $date) . "</a></td>";
if($i < $startday) echo "<td></td>";
else echo "<td align='center' valign='middle' height='20px' width='30px'>". ($i - $startday + 1) . "</td>";
if(($i % 7) == 6 ) echo "</tr>";
}
echo "</table>";
?>

So I don't think it's possible to make the cell a link but not the text, but you can make it look like that is happening. How?
Add an tag as the main element of the td in which all other content is contained
Make the take up the entire height and width of the td
Add text-decoration: none to the so the text within won't seem like links
Code:
<td>
Checkout Joshua Kissoon.
</td>
JSFiddle: http://jsfiddle.net/KrRzP/5/

I would take the approach of styling the a tag to fill the entire td.
a {
display: block;
height: 100%;
width: 100%;
}
td {
padding: 0;
}
Example: http://jsfiddle.net/a2w5w/

You can use jquery
$(document).ready(function(){
$(".calander tr").click(function() {
$(".calander tr").removeClass("redColor");
$(this).addClass("redColor");
});
});
JSFiddle : http://jsfiddle.net/M94HE/
Update:
If I understood your question following is your answer
http://jsfiddle.net/Z3sjL/

You can just wrap your cell in an anchor if you make the anchor a block level element. Or you can use event attributes, jquery, or javascript
html event attributes
<table>
<tr>
<td onclick="window.location = 'index.html';">Click me!</td>
</tr>
</table>
a little more..
<table>
<tr>
<td style="cursor:pointer"
onMouseover="window.status='http://www.stackoverflow.com/'"
onMouseout="window.status=''"
onMouseup="window.location='http://www.stackoverflow.com/'">
Click me!
</td>
</tr>
</table>
jquery
$("tr").click(function(){
});
javascript
$('tr').bind('click', function(){
window.location = 'http://stackoverflow.com';
});

How to iterate changing values onkeyup using jquery?

I have a problem in my jquery/code where the id's capturing with my jquery code is an array.
Here's the snippet code.
Here's my jquery.
<script type="text/JavaScript">
$(document).ready(function()
{
$('input').keyup(function()
{
$('.total_fabi').each(function() {
var answer = parseFloat($('.req').val()) * parseInt($('.was_perc').val());
$('.total_fabi').html(answer);
});
});
});
Here's the html generated code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<!-- This values are SQL generated inside While.. -->
<!-- Values generated by sql are under Description, Estimated Cost, Wastage-->
<!-- i Need to calculate the total using keyup by multiplying req'd qty * wastage% -->
<tr bgcolor='#FFF'>
<td>FABRICATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='7' class='was_perc'>7</td>
<td align='right'>
<font color='#900'>
<span id='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<tr bgcolor='#E3E4FA'>
<td>INSTALLATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='15' class='was_perc'>15</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<!-- Here's the while Ends..--->
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<!-- This part where $total+=$total_fabi -->
</td>
</tr>
</tbody>
</table>
Here's the actual PHP code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<?php
$total_non = 0;
$sel_fabi = mysql_query("SELECT * FROM tbllabor") or die (mysql_error());
while($non = mysql_fetch_array($sel_fabi)){
$desc_fabi = $non['desc'];
$est_cost = $non['est_cost'];
$was_perc = $non['wastage_perc'];
$was_perc = $was_perc * 100;
//$total_fabi = $req * $was_perc;
echo "<tr bgcolor='".$colors[$c++ % 2]."'>";
echo " <td>$desc_fabi</td>
<td align='center'>$est_cost</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='$was_perc' class='was_perc'>$was_perc</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>";
echo "</tr>";
}
?>
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<input type='hidden' value='<?php echo $total_non;?>'>
<?php echo $total_non;?>
</td>
</tr>
</tbody>
</table>
.each() function is not working with me. with this kind of code i stated. do you have any other option where i should use keyup or keydown to calculate the total i needed.. Thanks in advance..

id values must be unique on the page, you can't have more than one element with the same id. That's the fundamental problem.
You can change your id values to class values instead.
It's hard to tell exactly what you're trying to do, but if the goal is to update the total_fabi element within the same row each time a req or was_perc element changes:
$(document).ready(function()
{
$('input').keyup(function()
{
// Find the row (if any) containing this input
var $tr = $(this).closest("tr");
// Find the .req, .was_perc, and .total_fabi elements *within* this row
var $req = $tr.find(".req");
var $was_perc = $tr.find(".was_perc");
var $total_fabi = $tr.find(".total_fabi");
// Do the update (probably better to use `text` than `html`)
$total_fabi.text(parseFloat($req.val()) * parseInt($was_perc.val()));
});
});
Re your comment below:
sir how would i get the total computed generated by $total_fabi for my overall total? in php its just like $total += $total_fabi.. How can i do this in jquery?
You can do that with each:
var total = 0;
$(".total_fabi").each(function() {
total += parseFloat($(this).text());
});

First of all you need to know that ID attribute must be unique and you defined same ID many time.
You can use class instead of ID attribute.