2

我正在通过制作一个简单的 t-do 应用程序来学习 phonegap。

索引.html：

<!DOCTYPE html>
<html>
    <head>
        <title>To-dos</title>
    </head>
    <body onload='loadToDoList()'>
        <input type='button' value='Add To-do' onclick='createNewToDo()'/>
        <input type='button' value='Remove completed To-dos' onclick='removeCompletedTasks()'/>
        <br/><br/>
        <table id='dataTable' width='100%' border='1'>
        </table>
        <script src='js/index.js'></script>
    </body>
</html>

index.js：

(function() {
  var addTableRow, checkboxClicked, deleteAllRows, deleteSelectedRow, loadToDoList, saveToDoList, viewSelectedRow;

  window.rowID = 0;

  saveToDoList = function() {
    var checkBoxState, chkbox, i, row, rows, table, textValue, textbox, todoArray, _i, _len;
    todoArray = {};
    checkBoxState = 0;
    textValue = '';
    table = document.getElementById('dataTable');
    rows = table.rows;
    if (rows.length > 0) {
      i = 0;
      for (_i = 0, _len = rows.length; _i < _len; _i++) {
        row = rows[_i];
        chkbox = rows.cells[0].childNodes[0];
        if ((chkbox != null) && chkbox.checked === true) {
          checkBoxState = 1;
        } else {
          checkBoxState = 0;
        }
        textbox = row.cells[1].childNodes[0];
        textValue = textbox.value;
        todoArray["row" + (i++)] = {
          check: checkBoxState,
          text: textValue
        };
      }
    } else {
      todoArray = null;
    }
    return window.localStorage.setItem('todoList', JSON.stringify(todoArray));
  };

  loadToDoList = function() {
    var i, key, theList, val, _results;
    theList = JSON.parse(window.localStorage.getItem('todoList'));
    deleteAllRows();
    if (theList !== null && theList !== 'null') {
      i = 0;
      _results = [];
      for (key in theList) {
        val = theList[key];
        _results.push(addTableRow(theList["row" + (i++)], true));
      }
      return _results;
    }
  };

  deleteAllRows = function() {
    var i, rowCount, table, _i;
    table = document.getElementById('dataTable');
    rowCount = table.rows.count;
    for (i = _i = 0; 0 <= rowCount ? _i < rowCount : _i > rowCount; i = 0 <= rowCount ? ++_i : --_i) {
      table.deleteRow(i);
      rowCount--;
      i--;
    }
    return saveToDoList();
  };

  viewSelectedRow = function(todoTextField) {
    return alert(todoTextField.value);
  };

  deleteSelectedRow = function(deleteButton) {
    deleteButton.parentNode.parentNode.parentNode.removeChild();
    return saveToDoList();
  };

  checkboxClicked = function() {
    var chkbox, row, rows, table, textbox, _i, _len, _results;
    table = document.getElementById('dataTable');
    rows = table.rows;
    _results = [];
    for (_i = 0, _len = rows.length; _i < _len; _i++) {
      row = rows[_i];
      chkbox = row.cells[0].childNodes[0];
      textbox = row.cells[1].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true && (textbox != null)) {
        textbox.style.setProperty('text-decoration', 'line-through');
      } else {
        textbox.style.setProperty('text-decoration', 'none');
      }
      _results.push(saveToDoList());
    }
    return _results;
  };

  addTableRow = function(todoDictionary, appIsLoading) {
    var cell1, cell2, element1, element2, row, rowCount, table;
    rowID++;
    table = document.getElementById('dataTable');
    rowCount = table.rows.length;
    row = table.insertRow(rowCount);
    cell1 = row.insertCell(0);
    element1 = document.createElement('input');
    element1.type = 'checkbox';
    element1.name = 'chkbox[]';
    element1.checked = todoDictionary['check'];
    element1.setAttribute('onclick', 'checkboxClicked()');
    cell1.appendChild(element1);
    cell2 = row.insertCell(1);
    element2 = document.createElement('input');
    element2.type = 'text';
    element2.name = 'txtbox[]';
    element2.size = 16;
    element2.id = 'text' + rowID;
    element2.value = todoDictionary['text'];
    element2.setAttribute('onchange', 'saveToDoList()');
    cell2.appendChild(element2);
    checkboxClicked();
    saveToDoList();
    if (!appIsLoading) {
      return alert('Task added successfully');
    }
  };

  window.createNewToDo = function() {
    var todo, todoDictionary;
    todoDictionary = {};
    todo = prompt('To-Do', '');
    if (todo != null) {
      if (todo === '') {
        return alert('To-Do can\'t be empty');
      } else {
        todoDictionary = {
          check: 0,
          text: todo
        };
        return addTableRow(todoDictionary, false);
      }
    }
  };

  window.removeCompletedTasks = function() {
    var chkbox, i, rowCount, table, _i;
    table = document.getElementById('dataTable');
    rowCount = table.rows.length;
    for (i = _i = 0; 0 <= rows ? _i < rows : _i > rows; i = 0 <= rows ? ++_i : --_i) {
      chkbox = table.rows[i].cells[0].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true) {
        table.deleteRow(i);
        i--;
        rowCount--;
      }
    }
    saveToDoList();
    return alert('Completed tasks were removed');
  };

}).call(this);

我的createNewToDo功能运行良好，因为我能够创建新的待办事项。但是当我检查一个待办事项并单击删除按钮时，什么也没有发生。为什么我的removeCompletedTasks函数没有被调用？

4

1 回答 1

0

这是JSFiddle中提供的代码。我可以看到 removeCompletedTasks 失败的主要原因是行未定义。修复后，其他错误是由您定义的方法仅在外部函数范围内引起的。一旦完成，它们就消失了，无法调用。

每个方法都需要有窗口。在他们面前。然后 saveToDoList 需要做一些工作。表格方法不起作用，直接去行。一旦你有了你想要使用该引用的行。

window.saveToDoList = function() {
   var checkBoxState, chkbox, i, row, rows, textValue, textbox, todoArray, _i, _len;
   todoArray = {};
   checkBoxState = 0;
   textValue = '';
   rows = document.getElementById('dataTable').rows;
   if (rows.length > 0) {
     i = 0;
     for (_i = 0, _len = rows.length; _i < _len; _i++) {
       row = rows[_i];
       chkbox = row.childNodes[0];
       if ((chkbox != null) && chkbox.checked === true) {
         checkBoxState = 1;
       } else {
         checkBoxState = 0;
       }
       textbox = row.childNodes[1];
       textValue = textbox.value;
       todoArray["row" + (i++)] = {
         check: checkBoxState,
         text: textValue
       };
     }
   } else {
     todoArray = null;
   }
   return window.localStorage.setItem('todoList', JSON.stringify(todoArray));
};

随着该方法的工作，现在 removeCompletedTasks 需要一些微调。该循环可以简化为一个简单的 for 循环。删除行是通过每次更新来完成的，我知道这会更慢，但至少 chrome 会以原来的方式返回 table 的函数。要获得该复选框，需要再剥离一层子级，现在它可以工作了。

  window.removeCompletedTasks = function() {
    var chkbox, i, rowCount, rows;
    rows = document.getElementById('dataTable').rows;
    rowCount = rows.length;
    for (i = 0; i < rowCount; ++i) {
      chkbox = rows[i].childNodes[0].childNodes[0];
      if ((chkbox != null) && chkbox.checked === true) {
        document.getElementById("dataTable").deleteRow(i);
        --i;
        --rowCount;
      }
    }
    saveToDoList();
    return alert('Completed tasks were removed');
  };

查看新的JSFiddle以获取工作示例。

于 2014-05-20T22:22:34.327 回答