Question

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

将其设置为localstorage，并在两个选择中弹出一个，在另一个html页面上，另一个在创建它的html页面上。

脚本运行良好，并且我可以根据我选择的单元格来调用单元格。唯一的问题是我无法删除任务。我希望能够在html select中选择任务，然后将其所有单元格附加到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]
}

正如您在最底部看到的那样，我试图做我想做的事，但是没有成功。我改用task（y）和loadTaskFromStorage（1），因为我已经在另一个html页面中以（task =）和（loadTaskFromStorage）调用了这些函数，并且它们工作得很好。

当我尝试运行最底层的脚本时，它无法识别该任务，并说未定义。我无法在与设置相同的文件中调用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）; 但是当我将这一行更改为：警报（task.cells）; 我得到了它，实际上是警告任务中从未发生过的单元，所以这是巨大的进步！

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

如何将其添加到表中
仅通过更改选择（而不是单击按钮）就可以将任务添加到表中
当我使用添加每个任务的小删除按钮将其删除时，便能够从所有选择中完全删除该任务。

另一个更新：

我可以用类似的东西来附加task.cells [1] [0]，但我不能只做task.cells，我也不想附加它。.如何用每个X按钮逐行附加会添加到每个表行中，例如

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

上面的代码仅在每个单元格中添加八个彼此并没有在其特定表头下的单元格中添加。我该怎么办。

我感谢任何花时间帮助我的人。

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

在您的click函数中，我将一些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"
];

您将有一个名为task的数组，带有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"
];

这还将具有一组重新编制索引的键。查看更多：Deleting array elements in JavaScript - delete vs splice

希望有帮助。

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

1 个答案: