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

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

Answer 2

我想总是练习几个关键点：

html元素的ID应该是唯一的。
不应使用输入[隐藏]元素，而应将所有隐藏的html（稍后要显示）隐藏在隐藏元素中，并使用CSS隐藏此div。你可以使用jQuery获取隐藏的div的innerHtml，并在需要时用这个html替换任何其他元素的内部html。

以下是我的解决方案：

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>

希望这有帮助。

如何将值从HTML表传递到JQuery Dialog？

2 个答案: