将单元格添加回表格并删除任务。

Question

你好，我目前有一个脚本，其中我将一些数据添加到表中，然后输入文本并按下添加按钮，这会将该表中的所有单元格保存为您在taskName输入框中键入的内容。

它被设置为本地存储，并在另一个HTML页面上的一个选择器和创建它的HTML页面上的一个选择器中弹出。

脚本运行良好，我能够根据所选的单元格调用单元格。唯一的问题是我不能删除任务。我希望能够在HTML选择器中选择任务，然后将所有单元格附加到HTML页面中，以便我可以删除所有单元格，在我删除后，它会从localStorage中删除任务，换句话说就是完全删除它。以下是我的HTML代码：

<div id="taskContainer">
    <table id="items-table">
    <!--<caption>Task</caption>-->
        <tr>
            <th>Item</th>
            <th>Size</th>
            <th colspan="3">Options</th>
    </table>
</div>
<label for="loadTask">Load Task:</label>
<label for="taskName">Task Name:</label>
<select id="loadTask">
    <option></option>
</select>
<input type="text" id="taskName"></input>
<button type="submit" id="addTask">Add</button>

这是我的JS代码：

$(function() {

    loadAllTasks();

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

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

var tasky = loadTaskFromStorage1($("#loadTask").val());
$("#items-table").append(tasky.cells);

if ((tasky.cells) = "") {
    delete savedTask[taskName]
} 

正如你在底部所看到的，我试图做我想做的事情，但它没有起作用。我更改了任务(y)和loadTaskFromStorage(1)，因为我已经在另一个HTML页面中调用了这些函数作为(task =)和(loadTaskFromStorage)，它们运行得非常好。

当我尝试运行底部脚本时，它无法识别任务，并说它未定义。我无法在设置localStorage的同一文件中调用localStorage吗？或者还有其他我错过的东西。

我有HTML代码和JS，我错过了它的输入，当我按按钮时，它会将val()添加到表格中。

我希望能够轻松地创建和删除任务。

更新：

我将loadTasksFrom Storage函数添加到创建任务的函数之外，然后我制作了一个测试按钮来查看是否有效：

$(function() {
    $("#test-add").click(function() {
        var task = loadTaskFromStorage1($("#loadTask").val());
        $("#items-table").append(task.cells);

    })
})

当我运行时，出现了这个错误： html.replace不是一个函数 指向了这一行： $("#items-table").append(task.cells); 但当我将此行更改为： alert(task.cells); 我成功地让它警告任务中的单元格，这从未发生过，所以这是巨大的进步！

我现在需要解决的唯一问题是：

1.如何将其追加到表格中 2.只需更改select即可将任务添加到表格中（无需点击按钮） 3.能够完全从所有选择中删除任务，当使用每个任务添加的小删除按钮删除它时。

另外一个更新：

我能够追加task.cells [1] [0]之类的东西，但我不能只做task.cells，我也不想附加“”，那么我该如何逐行附加每个表行中添加的每个X按钮的内容？

.append(task.cells[1][0], task.cells[1][1], task.cells[1][2] etc...

上述代码仅在每个单元格旁边添加了八个，而没有添加到特定表头下的单元格中。我该怎么做呢？

非常感谢您抽出时间来帮助我。

- user9510595

---

欢迎来到 Stack Overflow。首先，我会考虑您代码的整体逻辑。如果您将 LocalStorage 视为数据表，则添加、删除和排序都在其中完成，当进行更改时，只需重新绘制 HTML 表格以匹配即可。可能需要更完整的示例，例如一些样本数据或一个工作示例。另外，您为什么要标记 jquery-ui？ - Twisty

还有一个 IF 语句的语法错误：if ((tasky.cells) = "") 不正确。你应该使用逻辑比较符号：if ((tasky.cells) == "")。 - Twisty

如果 tasky.cells 是一个数组，你将无法将数组与字符串值进行比较。该数组可能为空，即 tasky.cells.length == 0，或者每个数组元素的值可能为空字符串。要测试这一点，您需要迭代每个数组元素并执行比较。 - Twisty

Answer 1

经过一些代码修正，代码运行无误，但我不确定它是否按预期工作。

示例：https://jsfiddle.net/Twisty/h901jryt/

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

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

  var tasky = loadTaskFromStorage1($("#loadTask").val());
  $("#items-table").append(tasky.cells);

  $.each(tasky.cells, function(k, v) {
    if (v == "") {
      delete tasky.cells[k];
    }
  });
});

在您的点击函数中，我将一些 JavaScript 代码更新为 jQuery。这样做是为了保持一致性。

关于您尝试的代码，我使用了以下代码作为替代：

var tasky = loadTaskFromStorage1($("#loadTask").val());
$("#items-table").append(tasky.cells);

$.each(tasky.cells, function(k, v) {
  if (v == "") {
    delete tasky.cells[k];
  }
});

对象tasky被填充了元素，其中之一是cells，它是一个字符串数组。我假设您正在寻找空单元格。使用$.each()迭代这些元素是一个不错的方法。查看更多信息：http://api.jquery.com/jquery.each/

该函数将运行并从每个数组元素中接收k作为键和v作为值。例如，如果tasky.cells被分配以下数组：

var tasks = [
  "Wake Up",
  "Eat Breakfast",
  "Help Mom",
  "Drive to Work"
  "",
  "Go to Bed"
];

你会有一个名为 tasks 的数组，其中包含 6 个键：0、1、2、3、4、5；和 6 个元素。可以使用以下类似的语句：

$.each(tasks, function(k, v){
  $("#results").append(k + ": " + v + "<br />");
});

我们将会看到类似以下的HTML结果：

0: Wake Up<br />
1: Eat Breakfast<br />
2: Help Mom<br />
3: Drive to Work<br />
4: <br />
5: Go to Bed

我们可以使用这个键值来操作数组。为了完全删除元素，您可能需要考虑使用 .splice() 而不是 delete。

$.each(tasks, function(k, v) {
  if (v == "") {
    tasky.cells.splice(k, 1);
  }
});

如果我们有上述数据并执行此操作，则生成的数组将为：

[
  "Wake Up",
  "Eat Breakfast",
  "Help Mom",
  "Drive to Work"
  "Go to Bed"
];

这也将具有重新索引的键集。了解更多：JavaScript中删除数组元素 - delete vs splice

希望能有所帮助。

- Twisty

---

我仍然遇到这个错误 Cannot read property 'cells' of undefined，它指向这一行 $("#items-table").append(tasky.cells);。 - user9510595

这是我以前代码遇到的同样问题。 - user9510595

很奇怪，因为我将loadAllTasks和LoadTaskFromStorage函数添加到另一个JS文件中，以便将相同的任务添加到另一个HTML选择器中，然后我可以调用alert（task.cells）; ，它实际上会起作用并警报我所选任务中的所有单元格，当我按下按钮时。 - user9510595

你的 jsfiddle 在选择后没有将单元格追加回表格中。这是我想要实现的主要目标，以便我可以从存储中删除任务。 - user9510595