Transfer Data From Table
I have a table in HTML. JOHN DOE DOE TRUCKING <
Solution 1:
Here is the jsfiddle I don't know how you handle your popup but this is how your js should be structured.
$(function(){
$('a').click(function(){
$('h3').html($(this).html())
});
});
Solution 2:
With the assumption that popup opens when you click on the <a> then you could just use $(this).text() and do something like this:
$(document).ready(function(){
$('.name1 a').click(function() {
$('.popup1 h3').text($(this).text());
});
});
Full example:
<table><td class="name1"><a href="#">JOHN DOE</a></td>
<td class="company1">DOE TRUCKING</td>
<td class="position1">TRUCKER</td>
<td class="mc1">1234-567-8901</td>
<td class="dot1">1234-567-8901</td>
<td class="status1"><img src="images/cross.png" width="12" height="12" alt="cross"></td>
</table>
<div class="popup1">
<div class="cross3"><a href="#"><img src="images/closr-arrow.png" width="19" height="19" alt="closr-arrow"></a></div>
<h3>TABLE NAME</h3>
<a href="#" class="approve">APPROVE ACCOUNT</a>
<a href="#" class="deny">DENY ACCOUNT</a>
</div>
<script>
$(document).ready(function(){
$('.name1 a').click(function() {
$('.popup1').lightbox_me({}); // <-- whatever your popup is, it plays no role here
$('.popup1 h3').text($(this).text());
});
});
</script>
Sorry, you say lightbox but I cannot see how it's called or what lightbox given that lightbox is more of a gallery thing.
That's why I have used jQueryUI dialog instead, if this will not help then someone should take away your keyboard, and I hope this one will save you some duplication too (guessing given your class names).
<?php
$rows=array(
0=>array("id"=>'1',"name"=>'Tom',"company"=>'U',"status"=>'active'),
1=>array("id"=>'2',"name"=>'Hre',"company"=>'E',"status"=>'suspended'),
2=>array("id"=>'3',"name"=>'Peter',"company"=>'Pawtucket',"status"=>'wasted'),
3=>array("id"=>'4',"name"=>'Griffin',"company"=>'Patriot',"status"=>'drunk'),
);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet">
<script type="text/javascript" src="/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<style>
.name {color:#00F;}
</style>
<script>
$(document).ready(function(){
$("#popup").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 500,
title: "Content From Row",
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
});
</script>
<script>
$(document).ready(function(){
$('.name a').click(function() {
$('#popup h3').text($(this).text());
$(this).parent().siblings().each(function(){
if($(this).hasClass('company')){
$('#popup .popup_company').text($(this).text());
}
if($(this).hasClass('status')){
$('#popup .popup_status').text($(this).text());
}
});
$("#popup").dialog('open');
});
});
</script>
</head>
<body>
<?php
if(is_array($rows)){
?><table>
<tr><td>Row No</td><td>ID</td><td>Name</td><td>Company</td><td>Status</td></tr>
<?php
foreach($rows as $row_key=>$row){
?><tr><?php
if(is_array($row)){
echo('<td>'.$row_key.'</td>');
foreach($row as $value_key=>$value){
if($value_key == "name"){
echo('<td class='.$value_key.'><a>'.$value.'</a></td>');
}else{
echo('<td class='.$value_key.'>'.$value.'</td>');
}
}
}
?></tr><?php
}
?></table><?php
}
?>
<div style="display:none;"><div id="popup">
<div class="cross3">
<a href="#"><img src="images/closr-arrow.png" width="19" height="19" alt="closr-arrow"></a>
</div>
<h3>TABLE NAME</h3>
<a href="#" class="popup_company"></a>
<a href="#" class="popup_status"></a>
<a href="#" class="approve">APPROVE ACCOUNT</a>
<a href="#" class="deny">DENY ACCOUNT</a>
</div></div>
</body>
</html>
Post a Comment for "Transfer Data From Table"