2011-03-23 52 views
1

我有一张表格,里面有一个动态的行列表。在每行的1个单元格内,我希望用户能够单击单元格并调用表单。该表单将允许用户更改该单元格的值。现在,在我目前的实施中,如果我只有一排,所有的作品都很棒。如果我有2+行,表单根本不会呈现。我相信这是因为表单需要一个唯一的ID,但我不确定如何使用此实现来完成此操作。任何意见/想法将不胜感激。表中的AJAX表格td

<script type="text/javascript"> 
    $(document).ready(function() { 


     $(".status").click(function(e) { 
      e.preventDefault(); 
      $("fieldset#status_menu").toggle(); 
      $(".status").toggleClass("menu-open"); 
     }); 

     $("fieldset#status_menu").mouseup(function() { 
      return false 
     }); 
     $(document).mouseup(function(e) { 
      if($(e.target).parent("a.status").length==0) { 
       $(".status").removeClass("menu-open"); 
       $("fieldset#status_menu").hide(); 
      } 
     }); 

    }); 
</script> 

<tr> 

    <td> 
     <a href="/contract/view/id/<?php echo $this->contract_id; ?>">Ads</a> 
    </td> 
    <td><a href="/customers/<?php echo $this->customer_id ?>/<?php echo $this->contract_name ?>.pdf"><?php echo stripcslashes(htmlspecialchars_decode($this->escape($this->contract_name))) ?></a></td> 
    <td><?php echo $this->escape($this->contract_startdate) ?></td> 
    <td><?php echo $this->escape($this->contract_length) . " " ?> month(s)</td> 
    <td>$<?php echo ($this->escape($this->contract_value) - $this->escape($this->contract_discount)) ?></td> 
    <td> 
     <a href="#" class="status"><?php echo $this->escape($this->contract_status) ?></a> 
     <fieldset id="status_menu"> 

      <form enctype="multipart/form-data" action="/contract/updatestatus/id/<?php echo $this->contract_id?>" method="post" name=""><dl class="zend_form"> 

        <input type="hidden" name="contract_id" value="" id="contract_id" /> 
        <fieldset id="fieldset-AssignDetail"> 
         <dt id="contractStatus-label"><label disableFor="1" class="required">Status</label></dt> 
         <dd id="contractStatus-element"> 
          <label for="contractStatus-quote"><input type="radio" name="contractStatus" id="contractStatus-quote" value="quote" />Quote</label><br /><label for="contractStatus-signed"><input type="radio" name="contractStatus" id="contractStatus-signed" value="signed" />Signed By All Parties</label><br /><label for="contractStatus-inactive"><input type="radio" name="contractStatus" id="contractStatus-inactive" value="inactive" />Inactive</label></dd></fieldset> 
        <dt id="submit-label">&nbsp;</dt><dd id="submit-element"> 
         <input type="submit" name="submit" id="submit" value="Update" /></dd></dl></form> 
     </fieldset> 
    </td> 
</tr> 
+0

我不知道这是一个HTML的问题。我只是将这段代码复制到一个.html文件中,重复了,现在有两种形式。 – 2011-03-23 18:32:16

+0

这是很好的知道。它是一个更大的应用程序的一部分,所以也许会发生一些冲突。 – JoPo 2011-03-23 18:37:30

+0

不知道我在做什么错。我无法显示每个表单。假设我有2行,当我选择窗体的单元格时,它看起来像是渲染所有窗体,一个在另一个之上。 – JoPo 2011-03-23 20:15:58

回答

0

我发现了另一个很好的解决方案。关键是为jquery调用添加一个唯一的标识符。使用标准的对话方法可以使html和css代码更容易实现。

//增加默认动画速度以夸大效果 $ .fx.speeds._default = 1000; $(函数(){$ ( “?#dialogcon_id>”).dialog({ 的AutoOpen:假的, 显示: “盲”, 躲: “爆炸”, 模式: “真正的” }); $( “#openercon_id;?>”)。点击(函数(){$ ( “#dialogcon_id>?”).dialog( “开放”); 返回FALSE; }); });

<td> 
    <a href="/contract/view/id/<?php echo $this->con_id; ?>">Ads</a> 
</td> 
<td><a href="/customers/<?php echo $this->cust_id ?>/<?php echo $this->con_name ?>.pdf"><?php echo stripcslashes(htmlspecialchars_decode($this->escape($this->con_name))) ?></a></td> 
<td><?php echo $this->escape($this->con_startdate) ?></td> 
<td><?php echo $this->escape($this->con_length) . " " ?> month(s)</td> 
<td>$<?php echo ($this->escape($this->con_value) - $this->escape($this->contract_discount)) ?></td> 
<td> 
    <a href="/contract/updatestatus/id/<?php echo $this->con_id ?>" id="opener<?php echo $this->con_id; ?>" ><?php echo $this->escape($this->con_status) ?></a> 
    <div id="dialog<?php echo $this->con_id ?>" title="Basic dialog"> 
     <form enctype="multipart/form-data" action="/contract/updatestatus/id/<?php echo $this->con_id?>" method="post" name=""><dl class="zend_form"> 

       <input type="hidden" name="contract_id" value="" id="contract_id" /> 
       <fieldset id="fieldset-AssignDetail"> 
        <dt id="contractStatus-label"><label disableFor="1" class="required">Status</label></dt> 
        <dd id="contractStatus-element"> 
         <label for="contractStatus-quote"><input type="radio" name="contractStatus" id="contractStatus-quote" value="quote" />Quote</label><br /><label for="contractStatus-signed"><input type="radio" name="contractStatus" id="contractStatus-signed" value="signed" />Signed By All Parties</label><br /><label for="contractStatus-inactive"><input type="radio" name="contractStatus" id="contractStatus-inactive" value="inactive" />Inactive</label></dd></fieldset> 
       <dt id="submit-label">&nbsp;</dt><dd id="submit-element"> 
        <input type="submit" name="submit" id="submit" value="Update" /></dd></dl></form> 

    </div> 
</td>