如何将值从 HTML 表传递到 JQuery 对话框？

Question

我需要的是这样的： 我在 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 函数可能看起来很奇怪，请帮助纠正和改进。谢谢！！

Answer 1

我想经常练习几个关键点：

1. html 元素的 ID 应该是唯一的。
2. 不应使用 input[hidden] 元素，而应将所有隐藏的 html（稍后要显示的）包装在隐藏元素中，例如使用 CSS 隐藏此 div。您可以使用 jQuery 获取隐藏的 div 的 innerHtml，并在需要时用此 html 替换任何其他元素的内部 html。

以下是我的解决方案：

1) 在标记中所有以下样式：

<style>
    .hide { display: none; visibility: hidden; }
</style>

2) 将标签内的 html 替换为以下内容。请注意关键更改，我已将此 html 中所有按钮的 id 属性替换为 class，因为我们需要将 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) 在正文的末尾添加一个 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>

希望这会有所帮助。

Answer 2

我在我的页面中创建了相同的场景，但是我做了一个单独的 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。