How to pass values from HTML Table to JQuery Dialog?

问题

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.

my table structure seems like:

<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>

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});

});

I know the JS functions might look weird, please help on any correction and improvement. Thanks!!

回答1:

I would like to always practice few key points:

ID of an html element should be unique.
Instead of using input[hidden] elements, you should wrap all the hidden html(which you want to display later) in a hidden element like and hide this div using CSS. You can fetch the hidden div's innerHtml using jQuery and replace any other element's inner html with this html when required.

Below is my solution:

1) In tag all the following style:

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

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) 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) 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>

Hope this helps.

回答2:

I created the same scenario in my page but what i did i have a separate HTML page which contains my form. In my page if i click the button it will open a dialog pop up displaying my HTML form inside.

Here's what i did hope it can give you an idea.

Here's my button...

<input class="classname1"  type="button" value="ADD" name="add_item"/>

Here's my div tag

<div id="popup" style="display: none;"></div>

After clicking the button it will call my jquery function

$(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);
            },

    });
});

Hope this helps. But if not just tell me. By the way I am using Codeigniter.

来源：https://stackoverflow.com/questions/17689420/how-to-pass-values-from-html-table-to-jquery-dialog

标签

jquery

jquery-ui-dialog