如何将值从HTML表传递到JQuery对话框? [英] How to pass values from HTML Table to JQuery Dialog?
问题描述
我需要的是这样的: 我在html页面中有一个表格，其中包含几行. 每行包含一些数据，例如颜色，质量，位置等，但是我想将所有这些数据隐藏在表中并仅显示详细信息"链接，一旦单击该链接，将弹出一个JQuery对话框并显示所有信息. 我是JQuery的绿手，因此在实现它方面完全迷失了方向. 在网上做了很多研究，但仍然不知道如何处理自己的案例.
what I need is something like this: I have a table in a html page, which contains several rows. Each row contains some data, like color, quality, location et., but I want to hide all of them in the table and just show a "Details" link, once I click on the link, a JQuery dialog will popup and show all the information. I'm a green hand to JQuery so totally lost in how to implement it. Did a lot of research online, but still don't know how to make my own case work.
我的表结构看起来像:
<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函数如下所示:
and my JS function looks like:
$(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函数可能看起来很怪异，请在任何纠正和改进方面提供帮助.谢谢！
I know the JS functions might look weird, please help on any correction and improvement. Thanks!!
推荐答案
我想始终练习几个关键点:
I would like to always practice few key points:
- html元素的ID应该是唯一的.
- 您应该代替使用input [hidden]元素，而应将所有隐藏的html(稍后要显示)包装在一个诸如此类的隐藏元素中，并使用CSS隐藏该div.您可以使用jQuery获取隐藏的div的innerHtml，并在需要时用此html替换其他任何元素的内部html.
以下是我的解决方法:
1)在标记中使用以下所有样式:
1) In tag all the following style:
<style>
.hide { display: none; visibility: hidden; }
</style>
2)用以下内容替换html内部标记.请注意关键的更改，因为我们需要将click事件绑定到所有具有css类"create-dialog"的按钮，所以我将html中所有按钮的id属性替换为class.
2) Replace html inside tags with the following. Please note the key changes, I have replace id attribute with class for all buttons in this html as we need to bind the click event to all buttons having css class '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)在主体的末尾添加一个div，其内部html将由jquery.dialog函数使用以显示其内容.只要单击按钮，内容就会动态添加
3) Add a div in the end of body whose inner html will be used by the jquery.dialog function to show it's content. The content will be added dynamically whenever a button is clicked
<div id="dialog-html-placeholder" class="hide"></div>
4)添加以下javascript(包括jquery和jquery-ui库之后):
4) Add the following javascript (after including jquery and jquery-ui libraries):
<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>
希望这会有所帮助.
这篇关于如何将值从HTML表传递到JQuery对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
