从表中传输数据
Transfer data from table
我有一个HTML表格。
<tr class="top">
<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>
</tr>
当我在表格中选择名字时,它会打开一个弹出窗口。
<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>
如何使H3保留表中的名称?
弹出窗口显示如下:
$(document).ready(function(){
$('.name1 a').click(function(e) {
$('.popup1').lightbox_me({
});
这是jsfiddle我不知道你如何处理你的弹出窗口,但这是你的js应该如何构建。
$(function(){
$('a').click(function(){
$('h3').html($(this).html())
});
});
假设当你点击<a>
时弹出窗口打开那么你可以使用$(this).text()
做这样的事情:
$(document).ready(function(){
$('.name1 a').click(function() {
$('.popup1 h3').text($(this).text());
});
});
完整的示例:
<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>
对不起,你说的是灯箱,但我不知道它是怎么叫的,也不知道是什么灯箱,因为灯箱更像是一个画廊的东西。
这就是为什么我用jQueryUI对话框代替,如果这不会有帮助,那么有人应该拿走你的键盘,我希望这个也会为你节省一些重复(猜测你的类名)。
<?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>
相关文章:
- 使用JavaScript在网页之间进行数据传输
- 使用javascript asp.net将listbox数据传输到另一个listbox
- 通过 ajax 将数据传输到 php
- angularjs模态将数据传输到外部控制器的正确方法
- AJAX和PHP数据传输不起作用
- 使用 ajax 将 JavaScript 数据传输到 PHP
- Chrome中的数据传输
- KendoUI数据源赢得't将数据传输到ListView
- 使用锚标记进行数据传输
- 从JavaScript应用程序到Rails服务器的数据传输
- 如何使用 meteor.js 在浏览器中监控数据传输
- 跳转到另一个页面并同时将数据传输到该页面
- Ajax 数据传输器
- 将 Excel 数据传输到网页上的文本字段和按钮中
- 如何在 HTML5 放置事件的特定位置附加数据传输内容
- window.name 作为数据传输:一种有效的方法
- 如何将动态元素数据传输到 struts2.
- 在 Flask 中将客户端数据传输到服务器端
- 应用程序和网站之间的安卓数据传输
- Jquery - 输入数据传输不精确