javascript - jQuery 在单击事件中的 if 条件后停止脚本执行

Question

在此表中，只有在“已批准”时才可以选择行？列为空。用户还可以在“拒绝原因”列中添加文本。

单击“拒绝”按钮时，我想确保在执行其余操作之前，所有选定的行中都填写了所有拒绝原因。我尝试使用 return false 、 e.stopPropagation() 、 e.stopImmediatePropagation() 但这些都不起作用。正如您在我的示例中看到的，alert("test") 将始终被执行。我想阻止这一切。你能帮忙吗？

$(function() {

    var table = $("#myDataTable").DataTable({
        info: false,
        paging: false,
        searching: false,
        sorting: false
    });

    $("#myDataTable tbody").on('click', 'tr', function() {
        var tr = $(this).closest("tr");
        var rowText = tr.children("td").text();
        var approveDeny = tr.children("td:nth-child(2)").text();

        if (approveDeny == "") {
            $(this).toggleClass('selected');
        }
    });

    $("#myDataTable tbody tr td:nth-child(4)").click(function(e) {
        if ($(this).prev().prev().text() == "") {
            var text = $(this).text();
            $(this).text('');
            $('<textarea />').appendTo($(this)).val(text).select().blur(function() {
                var newText = $(this).val();
                var parentCell = $(this).parent();
                parentCell.find('textarea').remove();
                table.cell(parentCell).data(newText).draw();
            });
        }
        e.stopPropagation();
    });

    $("#btnDeny").click(function(e) {
        table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) {        	
            var data = this.data();
            if(data == "") {            	
            	alert( rowIdx + " is empty, you have to fill it.");
              return false;
            }
            console.log(data);
        });        
        alert("test");
    });


});

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table id="myDataTable" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Approved?</th>
            <th>Date</th>
            <th>Deny Reason</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td>Mickey Mouse</td>
            <td>Yes</td>
            <td>1/1/2016</td>
            <td></td>
        </tr>
        <tr id="2">
            <td>Minnie Mouse</td>
            <td></td>
            <td>1/3/2016</td>
            <td></td>
        </tr>
        <tr id="3">
            <td>Donald Duck</td>
            <td></td>
            <td>1/5/2016</td>
            <td></td>
        </tr>
    </tbody>
</table>
<br/>
<div>
    <input type="button" id="btnApprove" value="Approve">
    <input type="button" id="btnDeny" value="Deny">
</div>

Answer 1

您可以在内部 .every() 函数范围之外使用变量，并在该函数内更改它，以便知道数据是否有效。

$("#btnDeny").click(function(e) { // Outer scope function 
    var valid = true;
    table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) { // inner scope function     
        var data = this.data();
        if(data == "") { 
            valid = false;
            alert( rowIdx + " is empty, you have to fill it.");
        }
    });
    if (valid)
        alert("Data valid");
});