Question

我一直在尝试使用JavaScript和HTML创建任务管理器。我对编程很陌生，所以希望有人会帮助我解决以下问题：

由于某种原因，数组的项目不会进入表中。有什么有用的想法来解决这个谜团？感谢所有帮助！

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = init;
var descriptionS = new Array();

function init(){

                var delBtn = document.getElementById("buttonDel");
                delBtn.addEventListener('click', deleteRow, false);    
                var addTaskBtn = document.getElementById("addTask");
                addTaskBtn.addEventListener('click', getTaskData, false);
                var displayListBtn = document.getElementById("displayList");
                displayListBtn.addEventListener('click', generateList, false); 
                var sortByNumBtn = document.getElementById("sortByNumber");
                sortByNumBtn.addEventListener('click', sortListByNum, false);

}

function getTaskData(){
                var myDescription = document.getElementById("descriptionField").value;
                var myDate = document.getElementById("dateField").value;
                var myPriority = document.getElementById("selRow0").value;
                var description = new Object();
                description.descriptionData = myDescription;
                description.descriptionDate = myDate;
                description.descriptionPriority = myPriority;
                descriptionS.push(description);

}

function generateList(){
                var myTaskList = document.getElementsByTagName("td");
                myTaskList.innerHTML ="";

                for(var p = 0; p < descriptionS.length; p++){

                var tbl = document.getElementById('tblSample');
                  var lastRow = tbl.rows.length;
                  // if there's no header row in the table, then iteration = lastRow + 1
                  var iteration = lastRow;
                 var row = tbl.insertRow(lastRow);

                //Select cell
                var cell0 = row.insertCell(0);
                  var selT = document.createElement("input");
                  selT.type = 'checkbox';
                  selT.name = 'chkBox';
                  selT.id = 'chkBox';
                  cell0.appendChild(selT);

                // ID cell
                var cell1 = document.createElement("td");
                  cell1 = row.insertCell(1);
                var idFill = document.createTextNode(iteration);
                cell1.appendChild(idFill);
                  cellSelect.appendChild(cell1);

                //Description cell
                var cell2 = document.createElement("td");
                cell2 = row.insertCell(2);
                  var elF = document.createTextNode(descriptionS[p].descriptionData);
                  //elF.innerHTML = document.getElementById("descriptionField").value;
                cell2.appendChild(elF);

                // Priority cell
                  var cellPri = document.createElement("td");
                cellPri = row.insertCell(3);
                  var pri = document.getElementbyId('selRow0').value;
                  pri.name = 'selRow' + iteration;
                  cellPri.appendChild(pri);

                //Date
                  var cell4 = document.createElement("td");
                cell4 = row.insertCell(4);
                  var elF1 = document.createTextNode(descriptionS[p].descriptionDate);
                  //elF.innerHTML = document.getElementById("descriptionField").value;
                cell4.appendChild(elF1);

                  // Delete cell
                var cell5 = document.createElement("td");
                  cell5 = row.insertCell(5);
                 var del1 = document.createElement('input');
                  del1.type = 'button';
                  del1.name = 'buttonDel';
                 del1.id = 'buttonDel';
                  del1.value = "Delete";
                  del1.onclick = function () {

                        var table = document.getElementById("tblSample");
                        var rowCount = table.rows.length;

                            for(var i=0; i<rowCount; i++) {
                                    var row = table.rows[i];
                                    var chkbox = row.cells[0].childNodes[0];
                                    if(null != chkbox && true == chkbox.checked) {
                                                table.deleteRow(i);
                                                 rowCount--;
                                             i--;
                                }
            }
};
                  cell5.appendChild(del1);

    }

}

function sortListByNum(){

                descriptionS.sort(sortFunctionByNumber);
                generateList();
}

function sortFunctionByNumber(a, b){

                return a.descriptionData-b.descriptionData;

}

function deleteRow(tableID) {

            var table = document.getElementById("tblSample");
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
        }
    }
}
</script>

</head>

<body>

<form action="">
<p>
    Description: <input type="text" id="descriptionField" />
    Date: <input type="text" id="dateField" />
    Priority: <select name="selRow0" id="selRow0" />
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <input type="button" id="addTask" value="Add Task" />
    <input type="button" id="displayList" value="Display Task" />
    <input type="button" id="sortByNumber" value="Sort" />
</p>
<p>
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
  <tr>
      <th>Select</th>
      <th>ID</th>
    <th>Description</th>
    <th>Priority</th>
    <th>Date</th>
    <th>Delete</th>
  </tr>
  <tr>
  <td><INPUT type="checkbox" name="chk"/></td>
    <td>1</td>
    <td>Example</td>
    <td>
    <select name="selRow1">
    <option value="value1">1</option>
    <option value="value2">2</option>
    <option value="value3">3</option>
    </select>
    </td>
    <td>06/06/2013</td>
    <td>
    <input type="button" value="Delete" id="buttonDel" />
    </td>
  </tr>
</table>
</form>

</body>
</html>

Answer 1

使用ExtJS GridPanel http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html （点击编辑单元格）

去钓鱼，因为我喜欢它

1 个答案: