Develop Reference

table pagination without reload the page -Bootstrap-

I have a table fetching its data from database
I want to make pagination for table but without refreshing the page
my table code:
<?php
<table id="table2" class="table table-hover table-mc-light-blue ">
<thead>
<tr>
<th>#</th>
<th>اسم المطرب</th>
<th>عدد الاغاني</th>
<th>تعديل</th>
</tr>
</thead>
<tbody class="searchable" >
<?php
$artistquery= mysqli_query($conn,"SELECT * FROM `artist` ORDER BY `artistID` DESC ");
$num=1;
$x=0;
while($listartist = mysqli_fetch_assoc($artistquery)){
$songquery= mysqli_query($conn,"SELECT * FROM `songs` WHERE `artist` = '$listartist[artistname]' ");
$songsnumber = mysqli_num_rows($songquery);
$x+=0.1;
echo'
<tr class="animated bounceIn " style=" animation-delay:'.$x.'s;">
<td data-title="#"></td>
<td data-title="اسم المطرب"></td>
<td data-title="عدد الاغاني"></td>
<td data-title=""></td>
</tr> ';}
?>
NOTE: I tried DataTables.js but i did know how to remove the filter and show labels.
is there any different way to do it ?

I dont fully comprehend your query so I'll stick to the pagination. Lets Say you want to show 10 items at a time and you are using next and prev as pagination buttons, you can render the first view using LIMIT 10 in your query or using array_slice($mysql_result,0,10). I have this downloaded json files containing zips (countries and code), that is what I used to test it. the next and prev totally perfect but it works.
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<?php
$mysql_result = (array) json_decode(file_get_contents('zips'));
if(isset($_GET['ajax'])){
header('content-type: application/json');
$_GET['offset'] = isset($_GET['offset'])?$_GET['offset']:0;
echo json_encode(array_slice($mysql_result,$_GET['offset'],10));
exit;
}
$ar = array_slice($mysql_result,0,10);//or add LIMIT 10 in sql query
?>
<table border="on" width="100%">
<tbody id="songartiststuff">
<?php foreach($ar as $k => $r)://initial render?>
<tr>
<td data-replace="code"><?=$r->code?></td>
<td data-replace="country"><?=$r->country?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<center>
<button data-next="10">Next</button>
<button data-prev="0">Prev</button>
</center>
<script src="jquery.js"></script>
<script>
$(()=>{
document.querySelector('[data-next]').addEventListener('click',function(){
move(this.dataset.next);
console.log(this.dataset.next);
this.setAttribute('data-next',parseInt(this.dataset.next) + 10);//add to next
var prv = document.querySelector('[data-prev]');
prv.setAttribute('data-prev',parseInt(prv.dataset.prev) + 10);//add to prev
})
document.querySelector('[data-prev]').addEventListener('click',function(){
move(this.dataset.prev);
console.log(this.dataset.prev);
this.setAttribute('data-prev',parseInt(this.dataset.prev) - 10);// remove form next
var nxt = document.querySelector('[data-next]');
nxt.setAttribute('data-next',parseInt(nxt.dataset.next) - 10);//remove from prev
})
function move(int){
var template = document.querySelector('tbody tr').cloneNode(true);//get a sample from tbody
$.get('table.php?ajax=true&offset='+int).success(function(data){
$(document.querySelector('tbody')).empty();
$.each(data,function(i,v){
let tp = tmp.cloneNode(true);//clone the template
tp.querySelector("[data-replace='code']").innerHTML = v.code;//replace code
tp.querySelector("[data-replace='country']").innerHTML = v.country;//replace country
document.querySelector('tbody').appendChild(tp);//append to tbody
})
});
}
});
</script>

Get clicked href variable from one page to another

Greeting everyone,
Currently i'm making a webpage that has the following functions:
When the administrator opens the page, admin will be seeing a form filled with these information from a database:
What this page does is that it shows how many video's each user has in the database and when the admin clicks on the desired user ID, a new page should open with the video's of that specific user ID. The " DONE" button is to return to the main page when the admin is done deleting video's.
Now, what I have done is that I've assigned an href link to the userID values that is being fetched from Database. The problem is that, I have no clue how to pass the selected value/string to the next page with href. I've tried with Session, but ended up getting the last variable processed in the WHILE loop instead of getting the clicked UserID. Below follows my php code of what I've done. Can anyone give me some tips on how to pass the clicked userID from one page to another with href, or is there another way to do this?
code= click here
ps: As everyone can see, my php coding needs some serious improvement. But i'm still trying to improve by doing these types of exercises.
<?php
include_once ("includes/db_connection.php");
$sql = "SELECT Users_UserID, count(Users_UserID) AS total FROM video GROUP BY Users_UserID";
$sql2="SELECT UserID, FirstName, LastName FROM users";
$result = $connection->query($sql);
$result2 = $connection->query($sql2);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><form name="deleteSingleVideo" method="post" action="">
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td colspan="4" bgcolor="#FFFFFF"><strong>Delete user video</strong> </td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">#</td>
<td align="center" bgcolor="#FFFFFF"><strong>First Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Last Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>User ID</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Amount of videos</strong></td>
</tr>
<?php
session_start();
if ($result->num_rows > 0) {
while (($row=$result->fetch_assoc())&& ($row2=$result2->fetch_assoc()) ) {
?>
<tr>
<td align="center" bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"><center><?php echo $row2['FirstName']; ?></center></td>
<td bgcolor="#FFFFFF"><?php echo $row2['LastName']; ?></td>
<td bgcolor="#FFFFFF"><center><a href="DeleteVideo.php" target="_blank"><?php echo $row['Users_UserID'];
$_SESSION['id']=$row['id'] ?></center></td>
<td bgcolor="#FFFFFF"><center><?php echo $row['total'];?></a></center></td>
</tr>
<?php
}
}
?>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF"><input name="Done" type="submit" id="Done" value="Done" </td>
</tr>
<?php
$connection->close();
if(isset($_POST['Done'])){
header( "Location: Home.php" );
}
?>
</table>
</form>
</td>
</tr>
</table>
<?php
?>

this is not a good use of session
use get method to send such data :
append the id to href url --->href="<?php echo "DeleteVideo.php?id="$row['id'] ?>";
get data in the next page by accessing global variable ---> $_GET['id']

..
In the DeleteVideo.php your variable is $_GET['id']

use this code
and that id value get in xyz.php
$value=$_request['id'];
or
$value=$_Get['id'];

img by changing it's src and is drawn by a dynamically provided source (mysql and php) with a Javascript

I have these scripts:
<?
/*//Disable error reporting
error_reporting(0);
*/
//Report runtime errors
//error_reporting(E_ERROR | E_WARNING | E_PARSE);
//Report all errors
error_reporting(E_ALL);
//end of error reporting
?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(e){
var selected_value = $(this).val();
var option_data = $(this).children('option[value="'+selected_value+'"]');
// get data values
var visanumber = option_data.data('visanumber');
var idnumber = option_data.data('idnumber');
var statusapp = option_data.data('statusapp');
var subdate = option_data.data('subdate');
// the photo
var accntvisaphotopath = option_data.data('accntvisaphotopath');
if(accntvisaphotopath == 'data-passport=') {
$(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', 'accntvisaphotopath');
$(this).closest('td').siblings().find('img.passportPath').attr('src', 'passportpath');
} else {
$(this).closest('td').siblings().find('img.passportPath').attr('src', 'passportpath');
$(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', 'accntvisaphotopath');
}
// set the values
$(this).closest('td').siblings().find('span.visanumber').text(visanumber);
$(this).closest('td').siblings().find('span.idnumber').text(idnumber);
$(this).closest('td').siblings().find('span.statusapp').text(statusapp);
$(this).closest('td').siblings().find('span.subdate').text(subdate);
});
</script>
</head>
<body>
<?
$con=mysqli_connect("localhost","xxx","xxxx","xxxx");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL:" . mysqli_connect_error();
}
$result = mysqli_query($con, "SELECT * FROM visa ORDER BY idvisa");
?>
<div align="center">
<form name="contractInfo" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<table border="1px" width="700">
<tr>
<td align="center" colspan="7"><b>Email:</b><input name="email" type="text" id="email"></td>
</tr>
<tr>
<th> <div align="center"> Applicant Name </div></th>
<th> <div align="center">Visa Number</div></th>
<th> <div align="center">ID Number </div></th>
<th> <div align="center">Employment Status</div></th>
<th> <div align="center"> Visa </div></th>
<th> <div align="center"> Passport </div></th>
<th> <div align="center"><font color="red">Elapse</div></th>
</tr>
<tr>
<td>
<select>
<? echo "<option value=\"\">Select Person:</option>";?><br>
<? while ($row=mysqli_fetch_array($result)) {
echo "<option value=".$row['idvisa']." data-visanumber=".$row['visanumber']." data-idnumber=".$row['idnumber']." data-statusapp='{$row['statusapp']}' data-accntVisaPhotoPath=".$row['accntVisaPhotoPath']." data-passport=".$row['passportPath']." data-subdate='{$row['subdate']}'>".$row['fName']." ".$row['lName']."</option>";
}
?>
</select>
<?//Additional var
//Time
$today = date("Y/m/d G:i:s");
$date= $row["subdate"];
$days = strtotime($today) - strtotime($date);
//End Time
?>
</td>
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td>
<td><span class="statusapp"></span></td>
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
<td><span class="subdate"></span></td>
</span>
</tr>
<tr>
<td>
<select>
<?
mysqli_data_seek( $result, 0 );
echo "<option value=\"\">Select Person:</option>";
while ($row=mysqli_fetch_array($result)) {
echo "<option value=".$row['idvisa']." data-visanumber=".$row['visanumber']." data-idnumber=".$row['idnumber']." data-statusapp='{$row['statusapp']}' data-accntVisaPhotoPath=".$row['accntVisaPhotoPath']." data-passport=".$row['passportPath']." data-subdate='{$row['subdate']}'>".$row['fName']." ".$row['lName']."</option>";
}
?>
</td>
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td>
<td><span class="statusapp"></span></td>
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
<td><span class="subdate"></span></td>
</span>
</tr>
</table>
<br><br>
<input type="button" name="cancelvalue" value="CANCEL" onClick="self.close()">
<input name="reset" type="reset" value="Clear" height="14">
<input name="submit" type="submit" value="Send" height="14">
<br><br>
</form>
</body>
</html>
and may aim is to change it's src
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></img></td>
<td align="center"><img class="passportPath" height="50" width="50"></img></td>
I have tried to search in here but it seems I am too dumb in revising what I have found. I know, it is simple but I am new in handling custom data attributes and then have the Javascript populate it all BUT the image has caught me unprepared.
And my L A B is here.

I suggest use classes in this case, don't use ID because it will have multiple rows.
<td><span class="visanumber"></span></td>
<td><span class="idnumber"></span></td>
<td><span class="statusapp"></span></td>
<td align="center"><img class="accntVisaPhotoPath" height="50" width="50"></td>
<td align="center"><img class="passport" height="50" width="50"></td>
<td><span class="subdate"></span></td>
Then, just target that option based on the value you selected. Then extract those data attributes values according to selection.
<script type="text/javascript">
$(document).ready(function(){
$('select').on('change', function(e){
var selected_value = $(this).val();
var option_data = $(this).children('option[value="'+selected_value+'"]');
// get data values
var visanumber = option_data.data('visanumber');
var idnumber = option_data.data('idnumber');
var statusapp = option_data.data('statusapp');
var subdate = option_data.data('subdate');
// the photo
var accntVisaPhotoPath = option_data.data('accntvisaphotopath');
$(this).closest('td').siblings().find('img.accntVisaPhotoPath').attr('src', accntVisaPhotoPath);
var passportPath = option_data.data('passportpath');
$(this).closest('td').siblings().find('img.passportPath').attr('src', passportPath);
// set the values
$(this).closest('td').siblings().find('span.visanumber').text(visanumber);
$(this).closest('td').siblings().find('span.idnumber').text(idnumber);
$(this).closest('td').siblings().find('span.statusapp').text(statusapp);
$(this).closest('td').siblings().find('span.subdate').text(subdate);
});
});
</script>
Of course the path of the images is up to you since no PHP codes are found in your question, this is just an example.
Here is a working demo:
http://codepad.viper-7.com/GhH6Yh
thanks

Your get Image Path should return a image to show up, try this:
function getImagePath(){
return "https://www.google.com/images/srpr/logo11w.png";
}
Now, you need to add parameter to getImagePath function and and the functions should return the appropriate image url.

Perl -- how to scroll new web page to previous line position

After a perl script creates a new web page, is there something like (goto-char previous-position) -- e.g., before generating a new page, record current line number where the user is at and store it as a variable (i.e., previous-position) and then scroll to that same position after creating a new web page?
EDIT: Here is something I found Googling that seems to be related. If the page position can be recorded as a variable and passed to the script and executed when the new web page is loaded, then perhaps that would be a viable solution:
The HTML way is to declare the following where you want to scroll to:
[HTML]<a name="somename">[/HTML]
then the page could be scrolled to that automatically by accessing e.g.
[HTML]http://www.yourwebsite.com/yourpage.html#somename[/HTML]
The javascript way is to use scrollTo with the co-ordinates from the left and top to where you want to scroll to, e.g. Expand|Select|Wrap|Line Numbers
window.scrollTo(0,100);
To achieve this on page load, use on body onload
[HTML]<body onload="window.scrollTo(0,100); ...>[/HTML]
or define a function and call that instead.

The solution in perl / html was so simple that everyone missed it and assumed it had to be javascript. All we needed to do was add an anchor in the html (e.g., print '<a name="form_anchor"></a>';) and place &#form_anchor at the tail end of the perl script parameters. [A different solution is available in javascript, but I prefer including the solution in the existing perl script.]
NOTE:  Anchors could easily be set up for every link desired, so that when clicking the link, the appropriate parameter is passed to the perl script.
At some point I will revisit this answer and revise / redact it into a more simple example -- however, it is late at night and the script set forth below works exactly as I had hoped.
#!/usr/bin/perl
use CGI qw(:standard);
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
# yasnippet
my $yasnippet_dir = '/home/lawlist/.0.data/.0.emacs/.0.snippets/lawlist-tex-mode';
my $yasnippet_query = new CGI;
my $selected_file_yasnippet = $yasnippet_query->param('selected-file-yasnippet');
my $yasnippet_selected_file = $yasnippet_dir . "/" . $selected_file_yasnippet;
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
# forms
my $form_dir = '/home/lawlist/.0.data/forms';
my $form_query = new CGI;
my $selected_file_form = $form_query->param('selected-file-form');
my $form_selected_file = $form_dir . "/" . $selected_file_form;
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
# header
print "Content-type: text/html\n\n";
open(FILE,'/home/lawlist/www/header.include.shtml') and print <FILE>;
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
# yasnippet
print <<HTML;
<table bgcolor="#990066" width="100%" cellspacing=0 cellpadding=6 border=0>
<tr>
<td>
<table width="100%" bgcolor="#FFFFCC" cellspacing=0 cellpadding=10 border=0>
<tr>
<td>
<table width="100%" bgcolor="#000000" cellpadding=2>
<tr>
<td align=center>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor="#990066" HEIGHT=25 align=center><font face="verdana,arial,helvetica" COLOR="#FFFFFF" size=3><b>Yasnippet -- Code Snippets</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table width="100%" border=0 cellspacing=0 cellpadding=2>
<tr>
<td rowspan="1" width="25%"><font face="verdana,arial,helvetica" color="#000000" size=3>
HTML
opendir(DIR, $yasnippet_dir) or die $!;
while (my $yasnippet_selected_file = readdir(DIR)) {
next if ($yasnippet_selected_file =~ m/^\.|exclude-filename\.txt/);
next unless (-f "$yasnippet_dir/$yasnippet_selected_file");
next unless ($yasnippet_selected_file =~ m/\.txt|.el|.yasnippet$/);
print '' . $yasnippet_selected_file . "" . "<br>\n<br>" . "\n\n"; }
closedir(DIR);
if ($selected_file_yasnippet) {
open (DATA, $yasnippet_selected_file) or return $self->print_json_error($self->language('ERR_CANNOT_OPEN', $yasnippet_selected_file->{selected-file-yasnippet}, $!));
read (DATA, my $yasnippet_selected_file, -s DATA);
close DATA;
print '</td><td rowspan="1" width="75%"><font face="verdana,arial,helvetica" color="#000000" size=3>';
print '<pre class="brush: lisp">' . "\n\n" . $yasnippet_selected_file . "\n" . '</pre>';
print "\n\n<br>\n";
close FILE; }
print <<HTML;
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end of cream color table -->
<!-- end of red border table -->
<hr COLOR="#CCCCCC" size=1 NOSHADE>
HTML
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
# forms
print <<HTML;
<table bgcolor="#990066" width="100%" cellspacing=0 cellpadding=6 border=0>
<tr>
<td>
<table width="100%" bgcolor="#FFFFCC" cellspacing=0 cellpadding=10 border=0>
<tr>
<td>
<table width="100%" bgcolor="#000000" cellpadding=2>
<tr>
<td align=center>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor="#990066" HEIGHT=25 align=center><font face="verdana,arial,helvetica" COLOR="#FFFFFF" size=3><b>Forms -- Code Snippets</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table width="100%" border=0 cellspacing=0 cellpadding=2>
<tr>
<td rowspan="1" width="25%"><font face="verdana,arial,helvetica" color="#000000" size=3>
HTML
opendir(DIR, $form_dir) or die $!;
while (my $form_selected_file = readdir(DIR)) {
next if ($form_selected_file =~ m/^\.|exclude-filename\.txt/);
next unless (-f "$form_dir/$form_selected_file");
next unless ($form_selected_file =~ m/\.txt|.el|.yasnippet$/);
print '' . $form_selected_file . "" . "<br>\n<br>" . "\n\n"; }
closedir(DIR);
if ($selected_file_form) {
open (DATA, $form_selected_file) or return $self->print_json_error($self->language('ERR_CANNOT_OPEN', $form_selected_file->{selected-file-form}, $!));
read (DATA, my $form_selected_file, -s DATA);
close DATA;
print '</td><td rowspan="1" width="75%"><font face="verdana,arial,helvetica" color="#000000" size=3>';
print '<a name="form_anchor"></a>';
print '<pre class="brush: lisp">' . "\n\n" . $form_selected_file . "\n" . '</pre>';
print "\n\n<br>\n";
close FILE; }
print <<HTML;
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end of cream color table -->
<!-- end of red border table -->
HTML
# ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
open(FILE,'/home/lawlist/www/footer.include.shtml') and print <FILE>;
exit 0;

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.