Question

我有一个包含动态行列表的表。在每行的1个单元格中，我希望用户能够单击单元格并调用表单。该表单将允许用户更改该单元格的值。现在，根据我目前的实现，如果我只有1行，那么一切都很好。如果我有2行以上，则表单根本不会呈现。我相信这是因为表单需要一个唯一的ID，但我不知道如何使用这个实现。任何建议/想法将不胜感激。

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

Answer 1

我找到了另一种效果很好的解决方案。关键是为jquery调用添加唯一标识符。使用标准对话框方法可以更简单地实现html和css代码。

//增加默认动画速度以夸大效果 $ .fx.speeds._default = 1000; $（function（）{ $（“＃dialogcon_id？＆gt;”）。dialog（{ autoOpen：false，显示：“盲目”， hide：“爆炸”，莫代尔：“真实” }）; $（“＃openercon_id;？＆gt;”）。click（function（）{ $（“＃dialogcon_id？＆gt;”）。dialog（“open”）; 返回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>

AJAX在表的td中形成

1 个答案: