当确认对话框返回false时保持行可见

Keep row visible when confirm dialog returns false

本文关键字：确认 对话框 返回 false      更新时间：2023-09-26

嗨，我有一个包含行的表。当页面加载时，我隐藏了奇数行(它们包含详细信息)。当我单击行(偶数)时，它显示下一行(包含详细信息的行)。请参阅jsfiddle示例。

HTML: 

<table>
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Details</th>
    </tr>
    <tr>
        <td>Faisal</td>
        <td>Applicaiton Developer</td>
        <td>Work in  Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Faisal Details</td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="cancel" />
        </td>
    </tr>
    <tr>
        <td>Fabrizio </td>
        <td>Applicaiton Developer</td>
        <td>Work in  Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Fabrizio </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Kelly </td>
        <td>Applicaiton Developer</td>
        <td>Work in Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Kelly </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Hillary </td>
        <td>Applicaiton Developer</td>
        <td>Work in  Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Hillary </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Krista </td>
        <td>Applicaiton Developer</td>
        <td>Work in Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Krista </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Justin </td>
        <td>Applicaiton Developer</td>
        <td>Work in  Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Justin </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Eric </td>
        <td>Applicaiton Developer</td>
        <td>Work Aid</td>
    </tr>
    <tr>
        <td colspan="2">this is Eric </td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
    <tr>
        <td>Faisal </td>
        <td>Applicaiton Developer</td>
        <td>Work inAid</td>
    </tr>
    <tr>
        <td colspan="2">this is Faisal Details</td>
        <td>
            <input type="button" value="Approve" class="approve" />
            <input type="button" value="Deny" class="deny" />
            <input type="button" value="Cancel" class="deny" />
        </td>
    </tr>
</table>
jquery: 

$("table tr:nth-child(odd)").css("display", "none");
var prevRowIndex;
$("table tr:not(:first-child)").click(function (e) {
    if (prevRowIndex != undefined) {
        $(prevRowIndex).css("display", "none");
        prevRowIndex = null;
    }
    var styles = {
        "border": "#000",
            "margin-bottom": "10px"
    };
    prevRowIndex = $(this).next();
    //$(this).css("z-index", "9999");
    $(this).next().slideDown('slow');
});
$(".approve").click(function (e) {
    if (confirm("Are you sure you would like to approve this request?") == false) {
        e.preventDefault();
        $(this).parents("tr").css("display", "block");
    }
});
$(".deny").click(function (e) {
    if (confirm("Are you sure you would like to deny this request?") == false) {
        $(this).parents("tr").css("display", "block");
        e.preventDefault();
    }
});
$(".cancel").click(function (e) {
    if (confirm("Are you sure you would like to cancel this request?") == false) {
        $(this).parents("tr").css("display", "block");
        e.preventDefault();
    }
});

当一个按钮被点击时(在细节行中)，它首先请求确认。我的问题是当我在确认对话框中选择"取消"时，它隐藏了详细信息行。

我希望我已经解释清楚了。如有任何帮助，不胜感激。

jsfiddle示例

OK -您没有停止propagation，因此即使您单击按钮并删除/隐藏按钮所在的行，第一个侦听器$("table tr:not(:first-child)").click(function (e) {也会被触发。

这将工作。

$(".approve").click(function (e) {
    if (confirm("Are you sure you would like to approve this request?") == false) {
        e.stopPropagation();
    }
});
$(".deny").click(function (e) {
    if (confirm("Are you sure you would like to deny this request?") == false) {
        e.stopPropagation();
    }
});
$(".cancel").click(function (e) {
    if (confirm("Are you sure you would like to cancel this request?") == false) {
        e.stopPropagation();
    }
});

演示:http://jsfiddle.net/robschmuecker/7Q79g/

相关文章：