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>