This is my HTML code
<table data-role="table" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Player Name</th>
<th data-priority="2">Record</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Points</abbr></th>
<th data-priority="4">Highlight</th>
</tr>
</thead>
<tbody >
<div id="table"></table>
</tbody>
</table>
**This is my Javascript/Jquery**
$( document ).ready(function()
{
$.get('./php/rank.php', function(data)
{
$('#table').html(data);
}).error(function() {
$('#table').append('An error has occured');
} ).success (function(){
$('#table').append('');
})
});
**This is my php**
echo "<tr>";
echo "<th>". $row1['points']."<td/>";
echo "<td>". $row1['points']."<td/>";
echo "<td>". $row1['points']."<td/>";
echo "<td>". $row1['points']."<td/>";
echo "<td>". $row1['points']."<td/>";
echo "</tr>";
What I am trying to accomplish is to populate the table based on registered users. I
tried to echo the complete table - no success(I'm using JQuery Mobile) So I thought maybe I can Just Echo the th and td tags that will vary. Any suggestions would be greatly appreciated, maybe I'm just going about this the wrong way. Thanks
You are not closing your tags properly. Moreover, there is no need for a div insde tbody (I don't know if it's even allowed). Try with this corrected code:
<table data-role="table" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Player Name</th>
<th data-priority="2">Record</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Points</abbr></th>
<th data-priority="4">Highlight</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
**This is my Javascript/Jquery**
$( document ).ready(function()
{
$.get('./php/rank.php', function(data)
{
$('#movie-table tbody').html(data);
}).error(function() {
$('#movie-table tbody').append('An error has occured');
} ).success (function(){
$('#movie-table tbody').append('');
})
});
**This is my php**
echo "<tr>";
echo "<th>". $row1['points']."</th>";
echo "<td>". $row1['points']."</td>";
echo "<td>". $row1['points']."</td>";
echo "<td>". $row1['points']."</td>";
echo "<td>". $row1['points']."</td>";
echo "</tr>";
Edit: and of course you don't want to show the field "points" in all of the five columns.
I solved it. In php you have to echo the complete table.
echo "<table data-role='table' id='movie-table' data-filter='true' data-input='#filterTable-input' class='ui-responsive'>";
echo "<thead>";
echo "<tr>";
echo "<th data-priority='1'>Rank</th>";
echo "<th data-priority='persist'>Player Name</th>";
echo "<th data-priority='2'>Record</th>";
echo "<th data-priority='3'><abbr title='Rotten Tomato Rating'>Points</abbr></th>";
echo "<th data-priority='4'>Highlight</th>";
echo "</tr>";
echo "</thead>";
while($row1 = mysql_fetch_array($result1)){
echo "<tbody>";
echo "<tr>";
echo "<th>1</th>";
echo "<td>Kentwan</td>";
echo "<td>10-0</td>";
echo "<td>1000</td>";
echo "<td>test</td>";
echo "</tr>";
echo "</tbody>";
}
echo "</table>";
Try something like this:
<table data-role="table" id="movie-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive">
<thead>
<tr>
<th data-priority="1">Rank</th>
<th data-priority="persist">Player Name</th>
<th data-priority="2">Record</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Points</abbr></th>
<th data-priority="4">Highlight</th>
</tr>
</thead>
<tbody id='tab_body'>
</tbody>
</table>
** your Javascript/Jquery**
$( document ).ready(function()
{
$.get('./php/rank.php', function(data)
{
$('#tab_body').html(data);
})
}
Related
in the code i used csv file in which i want to edit the rows of 3rd coulmn as want to make them a http link by using tag but i cant do that. right now the code chowing only the link but i want to make them hyperlink
<html>
<head>
</head><body>
<table width="10%" cellpadding="1" cellspacing="0" border="1" ;">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
echo "<tr>";
$data = count($line);
foreach ($line as $cell) {
echo "<td>" . htmlspecialchars($cell) . "</td>";
}
echo "</tr>\n";
}
fclose($f);
?>
</tr>
</thead>
</table>
</body>
</head>
try:
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
if (!isset($line[2])) {
continue;
}
echo "<tr><td><a href='url'>" . htmlspecialchars($line[2]) . "</a></td></tr>";
}
fclose($f);
?>
I have the following form with checkboxes.
<?php
include 'connection.php';
$sql="SELECT * FROM `tbl`";
$query=mysqli_query($connect,$sql);
echo "<table border='2px'>
<thead>
<th>ID</th>
<th>Title</th>
<th>Name</th>
<th>Doing</th>
<th>Done</th>
</thead>
<tbody>
<form method='POST'>";
while($res=mysqli_fetch_assoc($query)){
$id=$res['id'];
echo"<tr>
<td>{$res['id']}</td>
<td>{$res['title']}</td>
<td>{$res['name']}</td>
<td><input type='checkbox' name='doing[]' value='".$res['id'].$res['title'].$res['name']."'></td>
<td><input type='checkbox' name='done[]' value='".$res['id'].$res['title'].$res['name']."'></td>
</tr>";
}
echo "<input type='submit' value='OK' name='btn'>
</form>
</tbody>
</table>";
?>
How do I make the checkboxes keep their checked state when the form is submitted?
I assume that you don't want both doing and done to be checked at the same time, so I replaced the checkboxes with radio buttons because that is their intended behavior.
I changed the names and values for the radio buttons so that they can be easily accessed in PHP, and from the code you've supplied it doesn't look appear as if you're using the names and values afterwards anyways.
I cleaned up the markup and script layout to make it more readable.
Please let me know if I have deviated too far from the intent of your original code.
Note: This will display the posted values, but it will not save those values to the database.
(Demo)
<?php
include('connection.php');
$sql = "SELECT * FROM `tbl`";
$query = mysqli_query($connect,$sql);
function get_checked ( $id ) {
if ( isset($_POST) && isset($_POST['checked'][$id]) ) {
return $_POST['checked'][$id];
}
return false;
}
?>
<form method="post">
<table border="2px">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Name</th>
<th>Doing</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<?php while ( $res = mysqli_fetch_assoc ( $query ) ): ?>
<?php $checked = get_checked ( $res['id'] ) ?>
<tr>
<td><?= $res['id'] ?></td>
<td><?= $res['title'] ?></td>
<td><?= $res['name'] ?></td>
<td><input type="radio" name="checked[<?= $res['id'] ?>]" value="doing" <?= $checked === "doing" ? 'checked' : '' ?>></td>
<td><input type="radio" name="checked[<?= $res['id'] ?>]" value="done" <?= $checked === "done" ? 'checked' : '' ?>></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<input type='submit' value='OK' name='btn'>
</form>
You can try to use this code.Hope this will work (Also try to use mysqli or PDO):
<?php
include 'connection.php';
$sql="SELECT * FROM `tbl`";
$query=mysqli_query($connect,$sql);
echo "<table border='2px'>
<thead>
<th>ID</th>
<th>Title</th>
<th>Name</th>
<th>Doing</th>
<th>Done</th>
</thead>";
echo "<form method='POST'>";
echo "<tr>";
$s=0;
while($res=mysqli_fetch_assoc($query)){
$id=$res['id'];
$doing_v="";
$done_v="";
$c_doing="";
$c_done="";
if(isset($_POST['doing'][$s])){
$doing_v=$_POST['doing'][$s];
}
if(isset($_POST['done'][$s])){
$done_v=$_POST['done'][$s];
}
if($doing_v=='".$res['id'].$res['title'].$res['name']."'){
$c_doing="checked";
}
if($done_v=='".$res['id'].$res['title'].$res['name']."'){
$c_done="checked";
}
echo" <td>{$res['id']}</td>
<td>{$res['title']}</td>
<td>{$res['name']}</td>
<td><input type='checkbox' name='doing[]'
value='".$res['id'].$res['title'].$res['name']."' ".$c_doing." ></td>
<td><input type='checkbox' name='done[]'
value='".$res['id'].$res['title'].$res['name']."' ".$c_done." ></td>
</tr>";
$s++;
}
echo "</table>";
echo "<input type='submit' value='OK' name='btn'>";
echo "</form>";
?>
my table contain large number of dynamic rows when i print or print preview it i get only table thead on only first page using window.print() function ..but i want table thead on each print page... help?
<div id="printablediv" >
<div style="padding:8px;font-size: 13px;">
<center>
<?php
$sumMul = 0;
$sumBil = 0;
?>
<?php $total = $total_ni = $total_aa = $total_pe = $total_bak = $total_cnt = 0; ?>
<table cellpadding="0" cellspacing="0" border="1" style="font-size: 13px;" >
<thead id="head">
<tr bgcolor="#333333" style="color:#black;font-weight: bold;">
<th width="100" align="center">Donor</th>
<th width="100" align="center">Loan No.</th>
<th width="120" align="center">Value Date</th>
<th width="90" align="center">Curr</th>
<th width="150" align="center">Multilateral</th>
<th width="150" align="center">Bilateral</th>
<th width="150" align="center">Forex</th>
<th width="150" align="center">Multilateral</th>
<th width="150" align="center">Bilateral</th>
</tr>
</thead>
<?php $previousValue = $list[0]->LOAN_ID; ?>
<?php $flag = 0; ?>
<?php foreach ($list as $key => $val): ?>
<tr>
<td align="center"><?php echo $val->EX_DONOR_CODE; ?></td>
<td align="center"><?php echo $val->LOAN_ID; ?></td>
<td align="center"><?php echo $val->VALUE_DATE; ?></td>
<td align="center"><?php echo $val->TRANSACTION_CURRENCY_CODE; ?></td>
<td align="right"><?php
if ($val->DONOR_TYPE == 'MULTILATERL') {
$sumMul += $val->COMMIT_CUR_AMT;
echo $val->COMMIT_CUR_AMT;
}
?></td>
<td align="right"><?php
if ($val->DONOR_TYPE == 'BILATERAL') {
$sumBil += $val->COMMIT_CUR_AMT;
echo $val->COMMIT_CUR_AMT;
}
?></td>
<td align="right"><?php //reports::report1_5Forex($val->TRANSACTION_CURRENCY_CODE ,$val->VALUE_DATE) ?></td>
<td align ="right"></td>
</tr>
<?php $previousValue = $val->LOAN_ID ?>
<?php endforeach; ?>
</table>
<input type="button" value="Print" id="prt" onclick="javascript:printDiv('printablediv')" />
</div>
i got javascript code here:
<script language="javascript" type="text/javascript">
function printDiv(divID) {
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<body>" +
divElements + "</body>";
$('#prt').hide();
window.print();
$('#prt').show();
document.body.innerHTML = oldPage;
}
You should use thead and tbody to print the table header on each page http://www.w3.org/TR/html4/struct/tables.html#edef-THEAD
Table rows may be grouped into a table head, table foot, and one or
more table body sections, using the THEAD, TFOOT and TBODY elements,
respectively. This division enables user agents to support scrolling
of table bodies independently of the table head and foot. When long
tables are printed, the table head and foot information may be
repeated on each page that contains table data.
If this doesn't work, the browser vendors doesn't implement the standard correctly.
In my admin panel I've a user page where all users are showing using Bootstrap Table with sorting option, pagination option.
Now I want to show more information about a user below each row when I click on a whole row then a div box will appear with more information.
How can i show this hidden div box below the each row ?
Javascript I'm using in html head section:
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').dataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
} );
} );
</script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Php & Html code I'm using in the html body section
<?php
$getUser = mysql_query("select * from members ORDER BY user_id DESC");
$num = mysql_num_rows($getUser);
?>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Position</th>
<th>Status</th>
<th>Kit type</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
while($search_result = mysql_fetch_array($getUser)){
$i++;
$uid = (int) $search_result['user_id'];
$email = $search_result['email'];
$fname = $search_result['fname'];
$lname = $search_result['lname'];
$company = $search_result['company'];
$position = $search_result['position'];
$status = $search_result['status'];
echo "<tr>";
echo "<td class='row' $class valign='top'>$fname</td>";
echo "<td class='row' $class valign='top'>$lname</td>";
echo "<td class='row' $class valign='top'>$company</td>";
echo "<td class='row' $class valign='top'>$position</td>";
echo "<td class='row' $class valign='top'>$status</td>";
echo "<td class='row' $class valign='top'>$kittype</td>";
echo "</tr>";
}
?>
</tbody>
</table>
How do I find the right approach to getting this comparison to work? I've tried all kinds of approaches. I even used ids, but they don't respond. If I do this "gumboots" string check though, it does work. "gumboots" was just a value for a product name that existed somewhere on the table. This is how I know I do not need PHP at all for this, despite the tables displayed in PHP in the Index view below. Any idea? I would appreciate it.
Here's the javascript
$('#example tbody tr td').each(function()
{
//var p_no_in_stock = parseInt($('#p_no_in_stock')).val();
//var p_reorder_quantity = parseInt($('#p_reorder_quantity')).val();
var p_no_in_stock = parseInt(document.getElementById('p_no_in_stock')).value;
var p_reorder_quantity = parseInt(document.getElementById('p_reorder_quantity')).value;
//if ($product['Product']['p_no_in_stock'].val() < $product['Product']['p_reorder_quantity'].val())
if ($(this).text() == "gumboots")
//if ($(this).p_no_in_stock < $(this).p_reorder_quantity)
{
//$("#row_" +" td").effect("highlight", {}, 1500);
$(this).closest('tr').attr('style','background-color:red');
$(this).parent().css('background-color','red');
$(this).parent().attr('style','background-color:red');
$(this).parent().addClass('highlight');
$(this).parent().css('font-weight','bold');
}
});
And this is the application in a View called Products.index
<div class="active">
<h2><?php echo __('Products'); ?></h2>
<table cellpadding="0" cellspacing="0" class="table table-striped table-bordered" id ="example">
<tr>
<th><?php echo $this->Paginator->sort('p_name', 'Name'); ?></th>
<th><?php echo $this->Paginator->sort('category_name', 'Category'); ?></th>
<th><?php echo $this->Paginator->sort('p_no_in_stock','No. in Stock'); ?></th>
<th><?php echo $this->Paginator->sort('p_reorder_quantity', 'Re-order Quantity'); ?></th>
<th class="actions"><?php echo __('Actions'); ?></th>
</tr>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td><?php echo h($product['Product']['p_name']); ?></td>
<td> <?php echo $this->Html->link($product['Category']['category_name'],
array('controller' => 'categories', 'action' => 'view', $product['Category']['id'])); ?>
</td>
<td id = "p_no_in_stock" type ="number" ><?php echo h($product['Product']['p_no_in_stock']); ?> </td>
<td id ="p_reorder_quantity" type ="number" ><?php echo h($product['Product']['p_reorder_quantity']); ?> </td>
<td class="actions">
<?php echo $this->Html->link(__('View'), array('action' => 'view', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $product['Product']['id']), array('class' => 'btn btn-mini'), __('Are you sure you want to delete # %s?', $product['Product']['id'])); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Thanks in advance.
Is this what you're asking?
http://jsfiddle.net/SinisterSystems/z9SE7/1/
HTML:
<table>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS:
tr:hover td {
background:#F00;
}
I am sending you mine code, please modify it accordingly....
The PHP Code is as -
<?php
if($num>0)
{
echo '<table width="100%" id="dep_table" style="margin-top:10px;" cellspacing="1" cellpadding="2" border="0">';
echo '<tr bgcolor="#4682B4">';
echo '<th>Editor</th>';
echo '<th>Department Id</th>';
echo '<th>Department Name</th>';
echo '</tr>';
$i=0;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$i++;
if($i % 2 == 0)
{
$bgcolor= "#6AA2C3";
}
else
{
$bgcolor= "#A2B5CD";
}
//extract row, this will make $row['firstname'] to just $firstname only
extract($row);
//creating new table row per record
echo "<tr bgcolor='$bgcolor' id='$DeptId' name='edit_tr'>";
echo '<td id="edit"><input id="edit" type="radio" name="deptid" value="DeptId" ?></td>';
echo "<td class='format'>{$row['DeptId']}</td>";
echo "<td class='format'>{$row['DeptName']}</td>";
echo "</tr>";
}
echo "</table>";
}
echo "</div>";
The JS for corresponding code is as -
$(document).ready(function() {
row_color();
$('#dep_table tr').click(function(e) {
$(this).find('td input:radio').prop('checked', true);
/* submit_fxn();
$('#form_ndesg').submit(function(e) {
return false;
});*/
});
});
//******* 1 Div Fade In/Out effect *******
function row_color(){
$('#dep_table tr').not(':first').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
};
The corresponding CSS code is as -
tr.hover{
background-color:#E7ECB8;
color:#990000;
}
You will move your mouse on the table, it will change the row color as well as rwo text color and when you click on particular row, it will enable the row by selecting radio button..
If this answer is helpful for you then please like it for answer, so that others can use it for reference.... Thanks and best of luck