Question

我正在创建一个Grid，其中每一行都不同。每行的最后一个td是

  <a href="view_all" > View All</a>

现在点击它时我想显示一个弹出窗口，其内容与此行相同。

 <?php
$sr_no = 1;

foreach($this->paginator as $record){
    if($sr_no % 2 == 0)
        $style = 'class="even-row"';
      else
        $style = 'class="odd-row"';
        ?>  
                    <tr <?php echo $style;?>>
                            <td class="sorting_1"> <input type="checkbox" /> </td>
                            <td><?php echo $record['contact_first_name'];?></td>
                            <td><?php echo $record['contact_mobile_no'];?></td>
                            <td><?php echo $record['contact_home_no'];?></td>
                            <td><?php echo $record['contact_office_no'];?></td>
                            <td><?php echo $record['contact_email'];?></td>
                            <td><a id="view_all" href="" > View All</a></td>
                    </tr>
                   <?php $sr_no ++; }?>

在我的java脚本中我想在每个

上贴上这个

$(document).ready(function() {
   $("#view_all").click(function(){
      //i want dialouge but all the contents of that row
        // $("#view_all").dialog();
   });
 });

Answer 1

首先，如果有多行，您将无法使用view_all作为名称。您可以将其设为类名，但页面上的ID必须是唯一的。所以我推荐这样的东西：

<a href="" class="view_all"> View All</a>

然后，您可以绑定到类，从行中提取细节并将其推送到对话框，然后显示它，如下所示：

// bind to the link's click event
$('.view_all').click(function(){

  // find the row
  var $tr = $(this).closest('tr');

  // grab the information (I don't know of another way other than use
  // column position. However, if you add classes or some other details
  // to the rows as their being output, this would be easier.
  var contact_first_name = $tr.children('td:eq(1)').text(),
      contact_mobile_no = $tr.children('td:eq(2)').text(),
      contact_home_no = $tr.children('td:eq(3)').text(),
      contact_office_no = $tr.children('td:eq(4)').text(),
      contact_email = $tr.children('td:eq(5)').text();

  // build the dialog
  var $dialog = $('<div>',{title:'Details'}).dialog({
    autoOpen: false
    // ...more dialog options...
  });

  // add details to dialog:
  $('<p>').text('First Name: ' + contact_first_name).appendTo($dialog);
  $('<p>').text('Mobile #: ' + contact_mobile_no).appendTo($dialog);
  /* ... */

  // show the dialog
  $dialog.dialog('open');
});

可以在此处找到工作演示：http://jsfiddle.net/ZJVcm/1/

Answer 2

如果上面的代码工作得很好而不仅仅是替换你的这行

$('.view_all').click(function(){

与

$('.view_all').on('click',function(){

你的问题解决了

如何使用不同的内容创建动态弹出窗口

2 个答案: