Question

我正在通过制作一个简单的t-do app学习phonegap。

的index.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函数没有被调用？

Answer 1

以下是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会按原样返回表的函数。要获得该复选框，需要再剥一个级别的孩子，现在它可以正常工作。

  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作为工作示例。

phonegap：函数没有被调用

1 个答案: