I want to create table like in this site:
https://www.avast.com/en-in/exploit-protection.php
I tried with below code but something is happening wrong , I am beginner of jquery.Reading data from mysql php to show.
HTML:
$(document).ready(function(){
$("#myTable tr:odd").addClass("odd");
$("#myTable tr:not(.odd)").hide();
$("#myTable tr:first-child").show();
});
$(document).ready(function(){
$("#myTable tr").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ='myTable' class='tablesorter' style='table-layout:fixed;'>
<thead>
<tr>
<th class='header' width='4%'>Wild</th>
<th class='header ' width='12%'>Release Date</th>
<th class='header' width='12%'>Exploit Name1</th>
<th data-sorter='false' width='18%'>Name2</th>
<th data-sorter='false' width='53%'>Comments</th>
<th data-sorter='false' width='1%'></th>
</tr>
</thead>
<tbody>
<tr>
<td> <i hidden>1</i><img src='ex.png' alt='' border=3 height=25 width=25></img>
</td>
<td>03/11/2015</td>
<td><b> CVE-2015-1623</b></td>
<td style='word-wrap:break-word;'>
<ul>
<li>ABC</li>
<li>XYZ</li>
<li>PQR</li>
</ul>
</td>
<td style='word-wrap:break-word;'>
Microsoft Internet Explorer 11 allows remote attackers to execute arbitrary code or cause ...
</td>
<td>
<div class='arrow'></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<b>Link: </b>
<ul>
<li><a href =http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623 target ='_blank'>http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623<br></a></li>
</ul>
</td>
<td></td>
</tr>
<tr>
Please let me know what is wrong in jquery.
Related
I am updating a plugin for WordPress using .php files. I have an update that requires a table and pagination. I'm trying to use jQuery for this.
I followed the datatable instructions but I am not seeing any changes applied. What am I doing wrong? I have added the jQuery to use the correct table id. Nothing seems to work doing this.
I am attempting to run through the data and allow the page to paginate. I do not care about having the option for user to select number of items on page at given time.
I am looking for an easy way to paginate a HTML table. Nothing I've tried seems to work
jQuery(document).ready(function() {
jQuery('#engine-search-table').DataTable();
});
<div class="parts-table">
<table id="engine-search-table" class="display">
<thead>
<tr id="header-row">
<th class="table-header">
<h4>Manufacturer</h4>
</th>
<th class="table-header">
<h4>Model</h4>
</th>
<th class="table-header">
<h4>Description</h4>
</th>
<th class="table-header">
<h4>Series</h4>
</th>
<th class="table-header">
<h4>Engine</h4>
</th>
<th class="table-header">
<h4>Years</h4>
</th>
<th class="table-header">
<h4>Begin Serial</h4>
</th>
<th class="table-header">
<h4>Engine Serial</h4>
</th>
</tr>
</thead>
<tbody>
<?php
if (!empty($parts)) {
foreach ($parts as $part) {
$meta = get_post_meta($part->ID); ?>
<tr id="data" class="parts-row">
<td class="part-container-title">
<?php printCFTVal($meta, 'manufacturer');?>
</td>
<td class="part-container-manufacturer">
<a href='<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'model'); ?>
</a>
</td>
<td class="part-container-category">
<?php printCFTVal($meta, 'description'); ?>
</td>
<td class="part-container-excerpt">
<?php echo str_replace('OVERVIEW', '', get_the_excerpt($part)); ?>
</td>
<td class='part-container-button'>
<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'enginemodel'); ?>
</td>
<td>
<?php printCFTVal($meta, 'years');?>
</td>
<td>
<?php printCFTVal($meta, 'beginSerial');?>
</td>
<td>
<?php printCFTVal($meta, 'engineserial');?>
</td>
</tr>
<?php }
} else {
echo '<p>No parts found.</p>';
} ?>
</tbody>
</table>
</div>
I am looking for information on the best approach to creating a 'more details' section on a table generated by a MySQL query which is something like this:
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" href="">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3">...insert details...</th>
</tr>
Each row has a unique id e.g. button-2,3,4 etc that I can use to create a unique class for each details section and I can hide and show the details using JQuery:
$(document).ready(function() {
$('.button-1').click(function(){
var link = $(this);
$('.hidden-1').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('Hide Details');
} else {
link.text('More Details');
}
});
});
});
But my knowledge on JQuery is limited so the only way I could think to call the code would be to use php to create multiple versions. If anyone could point my in the direction of the best approach I would be grateful
check this code. it will help you. here id="view_1",id="show_1" 1 is your dynamic value from database .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" id="view_1" href="javascript:void(0)" onclick="show_details(1)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_1">...insert details...</th>
</tr>
<tr>
<td>Joe1</td>
<td>Blogs2</td>
<td><a class="button-1" id="view_2" href="javascript:void(0)" onclick="show_details(2)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_2">...insert details...</th>
</tr>
</table>
<script type="text/javascript">
function show_details(id) {
if ($('#show_'+id).is(':visible')) {
$('#view_'+id).text('More Details');
$('#show_'+id).hide();
} else {
$('#view_'+id).text('Hide Details');
$('#show_'+id).show();
}
}
</script>
<style type="text/css">
.hidden_details {
display: none;
}
</style>
I have a table (mysql):
Optional table caption.
<table class="table"> <caption>myTable</caption> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>#mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>#fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>#twitter</td> </tr> </tbody> </table>
I have a persons.php page that pull out all person's name from that table, and showing like this:
<div>
<p>Name: Mark Otto View</p>
<p>Name: Jacob Thornton View</p>
<p>Name: Larry the Bird <a href="#">View</butaon></p>
</div>
And I have a detailed.php that shows person's username, like this:
<div>
<p>ID: ?</p>
<p>First name: ?</p>
<p>Last name: ?</p>
<p>User name: ?</p>
</div>
My question is that how to get detailed.php page by id when click the 'View' link?
Sorry, I am learning PHP, my point is when click the view link, what is the way to get the detailed.php displayed by the ID. I know how to get data displayed while using php+mysql, but I don't know how to perform the click action and direct to detailed.php page that showing info by id.
Thanks!
Try this! put your query instead of'$yourquery'
persons.php
<?php
<table>
<thead>
<tr>
<th># </th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
while($row=mysql_fetch_array($yourquery))
{
?>
<tr>
<td>Name : <?=$row['name']?> <?=$row['lastname']?></td>
<form method="GET" action="detailed.php">
<input type="hidden" value="<?=$row['id']?>" name="id" />
<td><button type="submit">View</button></td>
</form>
</tr>
<?php
}
?>
</tbody>
</table>
Replace the <button by <a href. In "persons.php" you will need to echo the ID in the <a href, later, in "detailed.php", you get the value as $_GET[ "id" ]:
persons.php
<div>
Name: Larry the Bird View
detailed.php
<?php
if ( isset( $_GET[ "id" ] ) )
echo "<p>ID: " . $_GET[ "id" ] . "</p>";
?>
How can I make each row clickable without repeating
This one is an example that shows the problem, parameter could be the code:
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr>
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr>
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
Thanks
Excuse me for my English, I hope that you understand the problem.
There are a few different ways to achieve this. Here are a couple using plain javascript and one using jQuery.
Plain JS
With plain javascript with just use the onclick parameter. Pretty straight forward.
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr onclick="window.location='page/parameter1';">
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr onclick="window.location='page/parameter2';">
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
</table>
jQuery
With jQuery you add a class so you can use that as the selector. There is also a data-href parameter that will hold the URL you want the user to go to when they click the row.
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr class="clickable" data-href="page/parameter1">
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr class="clickable" data-href="page/parameter2">
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
$("tr.clickable").click(function() {
window.location = $(this).data("href");
});
});
</script>
Your code should look like :
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr>
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr>
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
Added end tag </a>
I'm trying to get the Current Row of ID st Edit Icon
Please find the TableWidgets files as in below link
https://drive.google.com/folderview?id=0BwtwIV52Ve6kRFBJdkFCY0NvQUk&usp=sharing
Index.php
<script type="text/javascript">
$(document).ready(function() {
$('#list-grid table td div [action=tw-edit]').click(function(event) {
var rowId =$(this).closest("div.list-grid").attr("id");
alert (rowIdx);
});
});
</script>
<?php $this->beginWidget('application.widgets.TableWidget',
array(
'dataProvider'=>$dataProvider,
'fixedHead' => true,
'id' => 'list-grid',
));
?>
<?php $this->endWidget(); ?>
Grid.HTML
<div id="list-grid" class="box nominimize tablewidget" url/default/index">
<div class="content noPad">
<div class=" table-for-split" heightforsplit="200px">
<table class="table table-bordered">
<thead>
<tr>
<th class=" sorting" sortfield="id"></th>
<th class=" sorting" sortfield="dateordered"></th>
<th class="" sortfield="qty"></th>
<th class=" sorting" sortfield="tag"></th>
<th class="" sortfield="is_active"></th>
<th class="" sortfield="created"></th>
<th class="" sortfield="createdby"></th>
<th class="" sortfield="description"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td> action=tw-edit</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
Please anyone help to resolve this.