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

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 的东西没有任何建议？

感谢您的帮助

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

并在.remove-btn 修改您的click 侦听器。你的听众应该是这样的：

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