即使未在 table 中进行选择，也会弹出警报

Question

我有一个 bootstrap 模式，其中包含 table 个用户。我可以 select 来自 table 的用户并单击 'save'，显示 selected 用户的详细信息，我收到一条警告，说明 'Data saved successfully!'。

警报位于我代码中 'saveData()' 方法的末尾。

但是，即使 select 没有从 table 中编辑任何行，当我单击保存时，我仍然会收到相同的警报 'Data saved successfully!'。

我如何确保只有添加了 selected 使用的详细信息时才会显示警报？

var currentPageNo = 0; // Keep track of currently displayed page


// Select button that is descendant of userList
$('#userList .prev-btn').click(function(){ 
    userList(currentPageNo-10);
});
$('#userList .next-btn').click(function(){ 
    userList(currentPageNo+10);
});
$('#adminList .prev-btn').click(function(){ 
    adminList(currentPageNo-10);
});
$('#adminList .next-btn').click(function(){ 
    adminList(currentPageNo+10);
});

function userList(pageNo) {
    var resType="userList";
    createTable(resType,pageNo);
}

function adminList(pageNo) {
    var resType="adminList";
    createTable(resType,pageNo);
}

function createTable(resType, pageNo) {
    // Update global variable
    currentPageNo = pageNo; 
    // Set visibility of the correct "prev" button:
    $('#' + resType + ' .prev-btn').toggle(pageNo > 0);
    // Ask one record more than needed, to determine if there are more records after this page:
    $.getJSON("https://api.randomuser.me/?results=11&resType="+resType + "&pageIndex=" + pageNo, function(data) {
        var $table = $('#' + resType + ' table');
        $('tr:has(td)', $table).empty();
        // Check if there's an extra record which we do not display, 
        // but determines that there is a next page
        $('#' + resType + ' .next-btn').toggle(data.results.length > 10);
        // Slice results, so 11th record is not included:
        data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
            var json = JSON.stringify(record);
            $table.append(
                $('<tr>').append(
                    $('<td>').append(
                        $('<input>').attr('type', 'checkbox')
                                    .addClass('selectRow')
                                    .val(json),
                        (i+1+pageNo) // display row number
                    ),
                    $('<td>').append(
                        $('<a>').attr('href', record.picture.thumbnail)
                                .addClass('imgurl')
                                .attr('target', '_blank')
                                .text(record.name.first)
                    ),
                    $('<td>').append(record.dob)
                )
            );
        });
        // Show the prev and/or buttons
        
        
    }).fail(function(error) {
        console.log("**********AJAX ERROR: " + error);
    });            
}

var savedData = []; // The objects as array, so to have an order.

function saveData(){
    var errors = [];
    // Add selected to map
    $('input.selectRow:checked').each(function(count) {
        // Get the JSON that is stored as value for the checkbox
        var obj = JSON.parse($(this).val());
        // See if this URL was already collected (that's easy with Set)
        if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
            errors.push(obj.name.first);
        } else {
            // Append it
            savedData.push(obj);
        }
    });
    refreshDisplay();
    if (errors.length) {
        alert('The following were already selected:\n' + errors.join('\n'));
    } else {
  alert('Data saved successfully!');
 }
}

function refreshDisplay() {
    $('.container').html('');
    savedData.forEach(function (obj) {
        // Reset container, and append collected data (use jQuery for appending)
        $('.container').append(
            $('<div>').addClass('parent').append(
                $('<label>').addClass('dataLabel').text('Name: '),
                obj.name.first + ' ' + obj.name.last,
                $('<br>'), // line-break between name & pic
                $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
                $('<label>').addClass('dataLabel').text('Date of birth: '),
                obj.dob, $('<br>'),
                $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
                obj.location.street, $('<br>'),
                obj.location.city + ' ' + obj.location.postcode, $('<br>'),
                obj.location.state, $('<br>'),
                $('<button>').addClass('removeMe').text('Delete'),
                $('<button>').addClass('top-btn').text('Swap with top'),
                $('<button>').addClass('down-btn').text('Swap with down')
            ) 
        );
    })
    // Clear checkboxes:
    $('.selectRow').prop('checked', false);
    handleEvents();
}

function logSavedData(){
    // Convert to JSON and log to console. You would instead post it
    // to some URL, or save it to localStorage.
    console.log(JSON.stringify(savedData, null, 2));
}

function getIndex(elem) {
    return $(elem).parent('.parent').index();
}

$(document).on('click', '.removeMe', function() {
    // Delete this from the saved Data
    savedData.splice(getIndex(this), 1);
    // And redisplay
    refreshDisplay();
});

/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index, 2, savedData[index+1], savedData[index]);
    // And redisplay
    refreshDisplay();
});

$(document).on('click', ".top-btn", function() {
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
    // And redisplay
    refreshDisplay();
});
    
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() {
    $(".top-btn, .down-btn").prop("disabled", false).show();
    $(".parent:first").find(".top-btn").prop("disabled", true).hide();
    $(".parent:last").find(".down-btn").prop("disabled", true).hide();
}

$(document).ready(function(){
    $('#showExtForm-btn').click(function(){
        $('#extUser').toggle();
    });
    $("#extUserForm").submit(function(e){
        addExtUser();
        return false;
   });
});

function addExtUser() {
    var extObj = {
        name: {
            title: "mr", // No ladies? :-)
            first: $("#name").val(),
            // Last name ?
        },
        dob: $("#dob").val(),
        picture: {
            thumbnail: $("#myImg").val()
        },
        location: { // maybe also ask for this info?
        }
    };
    savedData.push(extObj);
    refreshDisplay(); // Will show some undefined stuff (location...)
}

.parent {
 background-color: #0000FF;
 color: white;
 border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>

  <div class="modal fade" id="userList" role="dialog">
    <div class="modal-dialog modal-lg">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">User List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="adminList" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Admin List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="extUser" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- External User-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add External User</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="extUserForm">
            <div class="form-group">
              <label class="control-label col-sm-3" for="name">Name:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-3" for="myImg">Image:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="myImg" name="myImg" required>
              </div>
            </div>
                                            
            <div class="form-group">
              <label class="control-label col-sm-3" for="dob">DOB:</label>
              <div class="col-sm-8">
                <input type="date" class="form-control" id="dob" name="dob" required>
              </div>
            </div>
            <hr />
            <div class="form-group">        
              <div class="col-sm-offset-3 col-sm-3">
                <button class="btn btn-primary btn-sm">Submit</button>
              </div>
              <div class="col-sm-3">
                <button type="reset" class="btn btn-primary btn-sm">Reset</button>
              </div>
              <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
              </div>
            </div>
          </form>
        </div> 
      </div>
    </div>
  </div>

<div class="container"></div>

注意：每个复选框都包含 selection 存储在 'savedData' 数组中的对象。

完整代码如下

Answer 1

当您遍历选中的复选框（select 用户）时，您可以增加变量以检查有多少用户 selected，如果至少有一个 selected 则警告消息如下:

var currentPageNo = 0; // Keep track of currently displayed page


// Select button that is descendant of userList
$('#userList .prev-btn').click(function(){ 
    userList(currentPageNo-10);
});
$('#userList .next-btn').click(function(){ 
    userList(currentPageNo+10);
});
$('#adminList .prev-btn').click(function(){ 
    adminList(currentPageNo-10);
});
$('#adminList .next-btn').click(function(){ 
    adminList(currentPageNo+10);
});

function userList(pageNo) {
    var resType="userList";
    createTable(resType,pageNo);
}

function adminList(pageNo) {
    var resType="adminList";
    createTable(resType,pageNo);
}

function createTable(resType, pageNo) {
    // Update global variable
    currentPageNo = pageNo; 
    // Set visibility of the correct "prev" button:
    $('#' + resType + ' .prev-btn').toggle(pageNo > 0);
    // Ask one record more than needed, to determine if there are more records after this page:
    $.getJSON("https://api.randomuser.me/?results=11&resType="+resType + "&pageIndex=" + pageNo, function(data) {
        var $table = $('#' + resType + ' table');
        $('tr:has(td)', $table).empty();
        // Check if there's an extra record which we do not display, 
        // but determines that there is a next page
        $('#' + resType + ' .next-btn').toggle(data.results.length > 10);
        // Slice results, so 11th record is not included:
        data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
            var json = JSON.stringify(record);
            $table.append(
                $('<tr>').append(
                    $('<td>').append(
                        $('<input>').attr('type', 'checkbox')
                                    .addClass('selectRow')
                                    .val(json),
                        (i+1+pageNo) // display row number
                    ),
                    $('<td>').append(
                        $('<a>').attr('href', record.picture.thumbnail)
                                .addClass('imgurl')
                                .attr('target', '_blank')
                                .text(record.name.first)
                    ),
                    $('<td>').append(record.dob)
                )
            );
        });
        // Show the prev and/or buttons
        
        
    }).fail(function(error) {
        console.log("**********AJAX ERROR: " + error);
    });            
}

var savedData = []; // The objects as array, so to have an order.

function saveData(){
    var errors = [];
    // Add selected to map
    var selectedUsersCount = 0;
    $('input.selectRow:checked').each(function(count) {
        selectedUsersCount = selectedUsersCount + 1;
        // Get the JSON that is stored as value for the checkbox
        var obj = JSON.parse($(this).val());
        // See if this URL was already collected (that's easy with Set)
        if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
            errors.push(obj.name.first);
        } else {
            // Append it
            savedData.push(obj);
        }
    });
    refreshDisplay();
    if (errors.length) {
        alert('The following were already selected:\n' + errors.join('\n'));
    } else if(selectedUsersCount > 0){
  alert('Data saved successfully!');
 }
}

function refreshDisplay() {
    $('.container').html('');
    savedData.forEach(function (obj) {
        // Reset container, and append collected data (use jQuery for appending)
        $('.container').append(
            $('<div>').addClass('parent').append(
                $('<label>').addClass('dataLabel').text('Name: '),
                obj.name.first + ' ' + obj.name.last,
                $('<br>'), // line-break between name & pic
                $('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
                $('<label>').addClass('dataLabel').text('Date of birth: '),
                obj.dob, $('<br>'),
                $('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
                obj.location.street, $('<br>'),
                obj.location.city + ' ' + obj.location.postcode, $('<br>'),
                obj.location.state, $('<br>'),
                $('<button>').addClass('removeMe').text('Delete'),
                $('<button>').addClass('top-btn').text('Swap with top'),
                $('<button>').addClass('down-btn').text('Swap with down')
            ) 
        );
    })
    // Clear checkboxes:
    $('.selectRow').prop('checked', false);
    handleEvents();
}

function logSavedData(){
    // Convert to JSON and log to console. You would instead post it
    // to some URL, or save it to localStorage.
    console.log(JSON.stringify(savedData, null, 2));
}

function getIndex(elem) {
    return $(elem).parent('.parent').index();
}

$(document).on('click', '.removeMe', function() {
    // Delete this from the saved Data
    savedData.splice(getIndex(this), 1);
    // And redisplay
    refreshDisplay();
});

/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index, 2, savedData[index+1], savedData[index]);
    // And redisplay
    refreshDisplay();
});

$(document).on('click', ".top-btn", function() {
    var index = getIndex(this);
    // Swap in memory
    savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
    // And redisplay
    refreshDisplay();
});
    
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() {
    $(".top-btn, .down-btn").prop("disabled", false).show();
    $(".parent:first").find(".top-btn").prop("disabled", true).hide();
    $(".parent:last").find(".down-btn").prop("disabled", true).hide();
}

$(document).ready(function(){
    $('#showExtForm-btn').click(function(){
        $('#extUser').toggle();
    });
    $("#extUserForm").submit(function(e){
        addExtUser();
        return false;
   });
});

function addExtUser() {
    var extObj = {
        name: {
            title: "mr", // No ladies? :-)
            first: $("#name").val(),
            // Last name ?
        },
        dob: $("#dob").val(),
        picture: {
            thumbnail: $("#myImg").val()
        },
        location: { // maybe also ask for this info?
        }
    };
    savedData.push(extObj);
    refreshDisplay(); // Will show some undefined stuff (location...)
}

.parent {
 background-color: #0000FF;
 color: white;
 border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>

  <div class="modal fade" id="userList" role="dialog">
    <div class="modal-dialog modal-lg">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">User List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="adminList" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Admin List</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
              <table class="table table-bordered table-hover" id="datatable">
                <tr>
                    <th>Select</th>
                    <th>Name</th>
                    <th>DOB</th>
                </tr>
            </table>
          </div>
          <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
            </div>

            <div class="col-sm-4">
                <button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
            </div>
        </div>
            <hr/>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
            </div>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
            </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="extUser" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- External User-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add External User</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="extUserForm">
            <div class="form-group">
              <label class="control-label col-sm-3" for="name">Name:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-3" for="myImg">Image:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="myImg" name="myImg" required>
              </div>
            </div>
                                            
            <div class="form-group">
              <label class="control-label col-sm-3" for="dob">DOB:</label>
              <div class="col-sm-8">
                <input type="date" class="form-control" id="dob" name="dob" required>
              </div>
            </div>
            <hr />
            <div class="form-group">        
              <div class="col-sm-offset-3 col-sm-3">
                <button class="btn btn-primary btn-sm">Submit</button>
              </div>
              <div class="col-sm-3">
                <button type="reset" class="btn btn-primary btn-sm">Reset</button>
              </div>
              <div class="col-sm-3">
                <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
              </div>
            </div>
          </form>
        </div> 
      </div>
    </div>
  </div>

<div class="container"></div>

Answer 2

只需删除else alert部分并像这样放在这里：

if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
            errors.push(obj.name.first);
            alert('Data saved successfully!');
        } else {
            // Append it
            savedData.push(obj);
            alert('Data saved successfully!');
        }

即使未在 table 中进行选择，也会弹出警报

Alert popping up even if no selection is made in the table

jquery

alert

conditional

variable-length-array

bootstrap-modal