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

时间:2013-07-17 01:01:28

标签: jquery jquery-ui-dialog

我需要的是这样的事情: 我在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功能可能看起来很奇怪,请帮助进行任何修正和改进。谢谢!

2 个答案:

答案 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. html元素的ID应该是唯一的。
  2. 不应使用输入[隐藏]元素,而应将所有隐藏的html(稍后要显示)隐藏在隐藏元素中,并使用CSS隐藏此div。你可以使用jQuery获取隐藏的div的innerHtml,并在需要时用这个html替换任何其他元素的内部html。
  3. 以下是我的解决方案:

    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>
    

    希望这有帮助。