Question

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

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

＆＃13;

$(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");
    });


});

＆＃13;

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

＆＃13;

Answer 1

是的，您需要将every（）的布尔输出分配给变量，然后仅在该变量为true时才执行警报。现在，忽略every（）调用的结果，并且无论如何都会执行警报。类似的东西：

var isValid = 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);
});
if (isValid) {
    alert("test");
}

Answer 2

您可以使用内部.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");
});

如果在click事件中有条件，则jQuery停止脚本执行

2 个答案: