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';
});
Related
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>
im trying to make a task manger based on web system that can monitor tasks at work , im using html and php .
im trying to show all the tasks in table and when i click on a task (row) i want to get a hidden td value (id of task) and send it as arg to another page for more information about the task .
i searched the web how can i do that , but i didnt realy understand how to do it with my table .
here is my table code
<table id="thickets_show">
<tr id="show_ticket_table_header">
<td>Work Week</td>
<td>Task Submited Date</td>
<td>Task Submited Time</td>
<td>Task</td>
<td>Project</td>
<td>Task Owner</td>
<td>Task Assigend to</td>
<td>Priority</td>
<td>Status</td>
<td>Task Total Work Time</td>
<td>Task Due Date</td>
<td>Task Finish Date</td>
<td>Team</td>
</tr>';
foreach ($tasks as $key => $value) {
if ($value['ticket_status']=="done")
echo '<tr id="done_ticket" >';
elseif ($value['ticket_priority']=="high")
echo '<tr id="high_ticket" class="ticket_raw">';
else
echo '<tr class="ticket_raw">';
echo '
<td>
'.$value['work_week'].'
</td>
<td>
'.$value['ticket_date'].'
</td>
<td>
'.$value['ticket_time_submit'].'
</td>
<td>
'.$value['ticket_request'].'
</td>
<td>
'.$value['ticket_project'].'
</td>
<td>
'.$value['ticket_onwer'].'
</td>
<td>
'.$value['ticket_assigned_user'].'
</td>
<td>
'.$value['ticket_priority'].'
</td>
<td>
'.$value['ticket_status'].'
</td>
<td>
'.$value['ticket_worktime'].'
</td>
<td>
'.$value['ticket_due_date'].'
</td>
<td>
'.$value['ticket_finish_date'].'
</td>
<td>
'.$value['team'].'
</td>
<td style="display:none;" id="ticket_id class="divOne">
'.$value['id'].'
</td>
</tr>
this is the function that im using
$(function(){
$(".ticket_raw" ).on(\'click\',function(e){
e.preventDefault();
var id = $(this).attr("#ticket_id");
alert(id);
});
});
There is a small issue to correct, then you can make this work nice and easily:
echo '<tr id="done_ticket" >'; is invalid - if you're creating multiple elements in a loop like this, you can't give them all the same "id", that's illegal in the HTML specification. You have to use classes instead.
Rewrite it slightly like this:
foreach ($tasks as $key => $value) {
echo '<tr data-id="'.$value['id'].'" class="ticket ';
if ($value['ticket_status']=="done")
echo 'done_ticket';
elseif ($value['ticket_priority']=="high")
echo 'high_ticket ticket_raw';
else
echo 'ticket_raw';
echo '">';
echo '
<td>
//etc...
Note the extra class "ticket" on the tr element, regardless of the status, and the "data-id" attribute containing the ID (instead of a hidden field).
Now, you can write some jQuery to get the ticket ID:
$(".ticket").click(function(event) {
var id = $(this).data("id"); //gets the data-id value from the clicked tr
window.location.href = "ticket.php?id=" + id; //example URL to redirect to, passing the ID from the tr
});
Lastly you can delete this code:
<td style="display:none;" id="ticket_id class="divOne">
'.$value['id'].'
</td>
The td has the id ticket_id, so you can use document.getElementById():
var td = document.getElementById('ticket_id');
var value = td.textContent;
Or, using jQuery:
var td = $('#ticket_id');
var value = td.text();
$('tr').on('click',function(){
var hidden_items = $(this).find('.td_hidden');
$.each(hidden_items,function(k,v){
console.log($(v).text());
})
})
html,body{
height: 100%;
margin: 0 auto;
padding: 0px;
}
td{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<table>
<tr>
<td>COLUMN1</td>
<td>COLUMN2</td>
<td>COLUMN3</td>
<td>COLUMN4</td>
</tr>
<tr>
<td>VALUE01</td>
<td>VALUE02</td>
<td>VALUE03</td>
<td>VALUE04</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_01</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_02</td>
</tr>
<tr>
<td>VALUE11</td>
<td>VALUE12</td>
<td>VALUE13</td>
<td>VALUE14</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_11</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_12</td>
</tr>
</table>
</body>
Hello guys i have a problem which i can't figure out for a little while. i have a loop which return value from database and i want each value to view their value on onmouseover property of JavaScript. but it only shows the first row value for all the tags. here is the php part of code
$result = "<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
<tr>
<td colspan='6' class='plate'>Follow-Up Events</td>
</tr>
<tr style='text-align:center; color:#FFF; background: #31B0D5;'>
<td>Customer</td>
<td>Plate</td>
<td class='col-md-4'>Problem</td>
<td>Date Created</td>
<td></td>
</tr>";
foreach ($followArray as $customer) {
$result = $result .
"<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td id='plate' onmouseover='plate();' onmouseout='plateout();'>$customer->plate</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>";
}
$result = $result . "</table><div id'white'></div>";
and the javascript
function plate() {
document.getElementById("white").innerHTML = $("#plate").text();
}
function plateout() {
document.getElementById("white").innerHTML = "";
}
Thanks for the help.
As you are using native js, just pass this into your plate function and use this.innerHTML.
Also fix the html - ids should be unique so either change it to a class or append a unique number onto the end (in the example below I have changed it to a class) - you should never have an id in a loop (unless you are appending an index or something like that).
And there should be an = in the white div
function plate(columnCell) {
document.getElementById('white').innerHTML = columnCell.innerHTML;
}
function plateout() {
document.getElementById('white').innerHTML = '';
}
<table id='displayDiv' width='1000' class='table_info table-bordered table-striped table-hover'>
<tr>
<td colspan='6' class='plate'>Follow-Up Events</td>
</tr>
<tr style='text-align:center; color:#FFF; background: #31B0D5;'>
<td>Customer</td>
<td>Plate</td>
<td class='col-md-4'>Problem</td>
<td>Date Created</td>
<td></td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout();'>$customer->plate1</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
<tr style='text-align:center; background: #FFF; color:#105a99; font-weight:bold;'>
<td>$customer->company</td>
<td class='plate' onmouseover='plate(this);' onmouseout='plateout(this);'>$customer->plate2</td>
<td>$customer->problem</td>
<td>$customer->date</td>
</tr>
</table>
<div id="white"></div>
If you want a jQuery solution then using the new class of plate (and removing the onmouseover and onmouseout from the html) you can do something like this:
// run in your document ready
var white = $('#white');
$('.plate').hover(
function() {
// mouseover
white.text($(this).text());
}, function() {
// mouseoout
white.text('');
}
);
I found a script to change the color of every seccond row to make it look nice, but when i add another table on the same page it colours the first table but the seccond table gets no colour why is this??
code of table.js
jQuery(document).ready(function() {
//for tables style
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
});
php webpage code:
<?php
//first table
echo'
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Seller</th>
<th>price(per 1k doge)</th>
<th>payment allowed</th>
<th>View Trade</th>
</tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>';
echo'</table> <br />';
//seccond table
echo '<h3>trades on going </h3>';
echo ' <table class="gridtable">
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Trade User</th>
<th>Cost($)</th>
</tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>';
echo'</table> ';
?>
A better way to do this is via CSS.
tr:nth-child(odd) { background-color: black, color: white }
tr:nth-child(even) { background color: white, color: black }
This will apply to all tables on your page, without having to mess about with the HTML as output by your PHP or Javascript.
You are referencing the first table by its id alternatecolor when you call document.getElementById(id). Perhaps add an id to your second table, then call altRows again for it?
Editing the second table in the PHP File:
echo ' <table class="gridtable" id="secondTable">
Editing the JavaScript:
window.onload=function(){
altRows('alternatecolor');
altRows('secondTable');
}
I fetched the data from the database and display it in a table with check boxes. What I
want to do is the selected row should move into the second table.There's something wrong with my js and i cant figure it out. It doesn't work. Here's the code
$result=mysql_query($query)
or die('Error executing query'.mysql_error());
echo "<table id='tbl1' style='border: solid 1px red'>";
echo "<tr><td>File Name";
echo "<td>File Size";
echo "<td>Date Modified</td></tr>";
while($row=mysql_fetch_array($result))
{
echo"<tr><td><input type='checkbox' class='chkclass' name='' value='$row[fid]' />";
echo "$row[file_path]";
echo "<td>$row[file_size]";
echo "<td>$row[file_modified]</td>";
}
echo"</table>";
echo "<table id='tbl2' style='border: solid 1px blue; margin-top: 10px'>";
echo"</table>";
Here's the js code:
(function(){
$("#tbl1 input:checkbox.chkclass").click(function(){
if ($(this).is(":checked"))
{
$(this).closest("tr").clone().appendTo("#tbl2");
}
else
{
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
findRow.remove();
}
});
});
There are couple of issues with your code
1) You are not closing your <td> properly
2) You are not using data-index attribute in tbl1 <tr>
The html should be like this
<table id='tbl1' style='border: solid 1px red'>
<tr>
<td>File Name</td>
<td>File Size</td>
<td>Date Modified</td>
</tr>
<tr data-index="5">
<td>
<input type='checkbox' class='chkclass' name='' value='1' />
</td>
<td>500,b</td>
<td>yes</td>
</tr>
</table>
<table id='tbl2' style='border: solid 1px blue; margin-top: 10px'>
</table>
EXAMPLE