我需要的是这样的事情: 我在html页面中有一个表,其中包含多行。 每行包含一些数据,如颜色,质量,位置等,但我想隐藏表中的所有数据,只显示“详细信息”链接,一旦我点击链接,将弹出一个JQuery对话框并显示所有信息。 我是JQuery的绿色手,所以完全失去了如何实现它。 在线进行了大量的研究,但仍然不知道如何让我自己的案例工作。
我的表格结构如下:
<div id="room_info" class="datatable_container">
<table id="rooms_table" class="admin_table display">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>
<div><a href="...">aaa</a></div></td>
<td>
<div id="dialog-form" name="dialog">
<button id='create-dialog'>Deatils</button>
<input type="hidden" name="name" id="name" value="abc"/>
<input type="hidden" name="email" id="email" value="aaa@mail.com"/>
</div></td>
</tr>
<tr class="odd">
<td>
<div><a href="...">bbb</a></div></td>
<td>
<div id="dialog-form" name="dialog">
<button id='create-dialog'>Deatils</button>
<input type="hidden" name="name" id="name" value="cdd"/>
<input type="hidden" name="email" id="email" value="bbb@mail.com"/>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
我的JS功能如下:
$(function() {
var name,email;
$('#create-dialog').button.click(function(){
name=$(this).find('name').val();
email=$(this).find('email').val();
$(this).find('dialog-form').dialog("open");
});
$(this).find('dialog-form').dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true});
});
我知道JS功能可能看起来很奇怪,请帮助进行任何修正和改进。谢谢!
答案 0 :(得分:0)
我在我的页面中创建了相同的场景,但是我做了一个单独的HTML页面,其中包含我的表单。在我的页面中,如果我单击该按钮,它将打开一个弹出的对话框,显示我的HTML表单。
这就是我希望它可以给你一个想法。
这是我的按钮......
<input class="classname1" type="button" value="ADD" name="add_item"/>
这是我的div标签
<div id="popup" style="display: none;"></div>
单击按钮后,它将调用我的jquery函数
$(function(){
$(".hero-unit input[name=add_item]").on('click',function(){
$('#popup').load("<?php echo site_url("item_controller/addNewItem/"); ?>").dialog({
title: "Add New Item",
autoOpen: true,
width: 450,
modal:true,
open: function (event, ui) { window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
},
});
});
希望这会有所帮助。但如果不是只是告诉我。顺便说一句,我正在使用Codeigniter。
答案 1 :(得分:0)
我想总是练习几个关键点:
以下是我的解决方案:
1)在标记中以下所有样式:
<style>
.hide { display: none; visibility: hidden; }
</style>
2)用以下内容替换html里面的标签。请注意关键更改,我已将此属性替换为此html中所有按钮的类,因为我们需要将click事件绑定到具有css类'create-dialog'的所有按钮。
<tr class="even">
<td>
<div>
<a href="...">aaa</a>
</div>
</td>
<td>
<button class='create-dialog'>Deatils</button>
<div class="hide">
<input type="text" name="name" id="name" value="abc"/>
<input type="text" name="email" id="email" value="aaa@mail.com"/>
</div>
</td>
</tr>
<tr class="odd">
<td>
<div>
<a href="...">bbb</a>
</div>
</td>
<td>
<button class='create-dialog'>Deatils</button>
<div class="hide">
<input type="text" name="name" id="name" value="cdd"/>
<input type="text" name="email" id="email" value="bbb@mail.com"/>
</div>
</td>
</tr>
3)在body的末尾添加一个div,其内部html将由jquery.dialog函数用来显示它的内容。只要单击按钮,就会动态添加内容
<div id="dialog-html-placeholder" class="hide"></div>
4)添加以下javascript(包括jquery和jquery-ui库之后):
<script type="text/javascript">
$(function() {
var name,email;
//$('#create-dialog').button.click(function(){
$('.create-dialog').on("click", function(){
debugger;
$('#dialog-html-placeholder').html($(this).next('div').html());
$('#dialog-html-placeholder').dialog();
});
});
</script>
希望这有帮助。