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

Question

嗨，我有一个包含行的表。当页面加载时，我隐藏奇数行(它们包含详细信息)。当我单击该行(偶数)时，它会显示下一行(包含详细信息的行)。请参阅 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 example

Answer 1

好吧 - 你不会停下来 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/