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
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 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';
});
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.