Question

我想附加我保存在本地存储中的表数据。我已经尝试过在此循环中添加其单元格，并根据其读取的计数或行来更改数字。这是我的JS代码：

$(function() {
    $("#loadTask").change(function() {
        var task = loadTaskFromStorage1($("#loadTask").val());
        var rows = $('#items-table tr').length;

        var loop = 0;
        var r = 1;

        while (loop < rows) {
            $("#items-table").append('<tr>'
          +'<td>'+task.cells[r][0]+'</td>'
          +'<td>'+task.cells[r][1]+'</td>'
          +'<td>'+task.cells[r][2]+'</td>'
          +'<td>'+task.cells[r][3]+'</tr>')
          r += 1;
          loop += 1;
        }

    })
})

这显然是行不通的，因为我猜测是当我用JSON.Stringify表数据时将其保存到一个长字符串中，因为当我添加alert（row）时；即使该任务有两行，在循环之前和之后我也每次都得到1。

这是我用来将数据追加到表中的方法，以后我使用特殊名称将其保存在本地存储中，这样我就可以保存多个不同的表数据：

function addRow() {
    var item_text = $('#item-input').val();
    var item_color = $('#color-input').val();
    var size_text = $('#sizes-item').val();
    var any_color = $('#any-color').is(':checked') ? 'Any Color' : '';
    var any_size = $('#any-size').is(':checked') ? 'Any Size' : '';
    $('#items-table').append('<tr>'
        +'<td>'+item_text+', '+item_color+'</td>'
        +'<td>'+size_text+'</td>'
        +'<td>'+any_color+', '+any_size+'</td>'
        +'<td><button class="remove-btn"><div class="thex">X</div></button><td>'
        +'</tr>');
}

$(function(){
  $('#add-item').click(function(){
    addRow();
    return false;
  });
  $('body').on('click', '.remove-btn', function(){
    $(this).parent().parent().remove();
  });
});

我认为，也许由于无法正确计数表行，所以在任何表行都不变的唯一真实的东西是随每行添加的删除按钮。

因此它尝试更改

var rows = $('#items-table tr').length;

收件人：

var rows = $('#items-table button').length;

我以为可以，但是当我在循环前后添加警报部分时，每次都会得到0。

我该怎么做才能以某种方式对每一行进行计数，以便能够像添加它们一样将它们正确地附加回表中。

这是将表数据保存到localStorage的javascript：

$(function() {

  loadAllTasks();

  $("#addTask").click(function() {
    let cells = Array.prototype.map.call($("#items-table")[0].rows, row => {
      return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
    });
    // create task object from cells
    var task = {
      cells: cells
    };

    var itemCount = $("#items-table tr").length - 1;

    var lengthrows = {
      itemCount: itemCount
    }

    saveLength(lengthrows);

    var rowsCount = loadLength()
    alert(rowsCount);

    // set name property of the task
    task.Name = $("#taskName").val();

    // call save method using the new task object
    saveTaskInStorage(task);
  });

  function saveTaskInStorage(task) {
    // Get stored object from localStorage
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    // To be sure that object exists on localStorage
    if (!savedTasks || typeof(savedTasks) !== "object")
      savedTasks = {};

    // Set the new or exists task by the task name on savedTasks object
    savedTasks[task.Name] = task;

    // Stringify the savedTasks and store in localStorage
    localStorage.setItem('tasks', JSON.stringify(savedTasks));

    alert("Task has been Added");
  }

 function saveLength(lengthrows) {
    var count = localStorage.getItem('lengthrows');
    if (!count || typeof(count) !== "object")
      savedCount = {};
    savedCount[task.Name] = task;
    localStorage.setItem('itemCount', savedTasks);
  }
  function loadLength(taskName) {
    var lengthCount = localStorage.getItem("itemCount");
      return lengthCount[taskName];
  }

  function loadAllTasks() {

    // Get all saved tasks from storage and parse json string to javascript object
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    // To be sure that object exists on localStorage
    if (!savedTasks || typeof(savedTasks) !== "object")
      return;

    // Get all property name of savedTasks object (here it means task names)
    for (var taskName in savedTasks) {
      $("#loadTask").append('<option>' + taskName + '</option>')
    }
  }

});

function loadTaskFromStorage1(taskName) {
   var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    //Return the task by its name (property name on savedTasks object)
    return savedTasks[taskName];
}

我还试图保存每个特定任务中的行数。我在下面用saveLength尝试过的东西没有任何建议吗？

感谢任何帮助，谢谢<3

Answer 1

您需要执行加载任务时的代码如下所示：

$(function() {

  $("#loadTask").change(function() {
    var task = loadTaskFromStorage1($("#loadTask").val());
    var rows = task.cells;
    let tpl = (rows) => {
      return rows.slice(1).map(e => '<tr>' + e.map(e => `<td>${e}</td>`) + '</tr>');
    }
    $("#items-table").append(tpl(rows));

  })
})

要删除任务，您需要添加我编写的removeTask函数：

function removeTask (taskName) {
    var tasks = JSON.parse(localStorage.getItem('tasks'));

    if (typeof tasks !== "object")
        return false; // our tasks list not set. return negative.

    delete tasks[taskName];
    $('#loadTask > option:contains(' + taskName + ')').remove();
    localStorage.setItem('tasks', JSON.stringify(tasks));
    return true;
};

并在click处修改您的.remove-btn侦听器。您的听众应该看起来像这样：

$('body').on('click', '.remove-btn', function(){
    $(this).parent().parent().remove();

   if ($('#items-table > tbody').children().length < 2) {
    console.log("attemping to remove...");
    if (removeTask($("#loadTask").val()))
        alert('Task successfully removed.');
   }
  });

使用循环将表数据追加到表中

1 个答案: