确认对话框返回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/