为什么在Table中的DOM中td前面会有text？

wzc314159 2017-05-02 12:48:54

请大虾们帮忙看一下，感谢~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
function addCourse(){
//根据表格ID来添加行
var tableObject = document.getElementById("myTable");
var row = tableObject.insertRow(tableObject.rows.length-1);
//根据行来添加列
var cel1 = row.insertCell(0);
var cel2 = row.insertCell(1);
var cel3 = row.insertCell(2);
var cel4 = row.insertCell(3);
//设置列的属性及值
cel1.innerHTML = "<input type='text' name='courseName' id='courseName' style='text-align:left' size='30'/>";
cel2.innerHTML = "<input type='text' name='courseNumber' id='courseNumber' style='text-align:left' size='10'/>";
cel3.innerHTML = "<input type='text' name='teacherName' id='teacherName' style='text-align:left' size='10'/>";
cel4.innerHTML = "<input type='button' value='删除' name='del' onclick='delTable(this)'/> " +
"<input type='button' value='保存' name='sav' onclick='savTable(this)'/> " +
"<input type='button' value='修改' name='modi' onclick='modiTable(this)'/>";
}
//实现删除行的函数
function delTable(obj){
var delTab = document.getElementById("myTable");
delTab.deleteRow(obj.parentNode.parentNode.rowIndex);
//alert(obj.parentNode.parentNode.rowIndex);
}
//实现保存行的属性
function savTable(obj){
//var delTab = document.getElementById("myTable");
var nodes = obj.parentNode.parentNode.childNodes;
//console.log(nodes);
nodes[0].firstChild.setAttribute("readonly","reradonly");
nodes[0].firstChild.setAttribute("style","text-align:center;border-style:none");
nodes[1].firstChild.setAttribute("readonly","reradonly");
nodes[1].firstChild.setAttribute("style","text-align:center;border-style:none");
nodes[2].firstChild.setAttribute("readonly","reradonly");
nodes[2].firstChild.setAttribute("style","text-align:center;border-style:none");
//obj.value="修改";
//obj.onclick="modiTable()";
//alert(document.getElementById("courseName").value);
}
//实现修改列的值得属性
function modiTable(obj){
var nodes = obj.parentNode.parentNode.childNodes;
nodes[0].firstChild.removeAttribute("readonly");
nodes[0].firstChild.setAttribute("style","text-align:left;border-style:1");
nodes[1].firstChild.removeAttribute("readonly");
nodes[1].firstChild.setAttribute("style","text-align:left;border-style:1");
nodes[2].firstChild.removeAttribute("readonly");
nodes[2].firstChild.setAttribute("style","text-align:left;border-style:1");
}
</script>
</head>
<body>
<table id="myTable" border="1">
<caption>课程系统</caption>
<tr>
<td>课程名称</td>
<td>课时数量</td>
<td>代课教师</td>
<td>操作</td>
</tr>
<tr>
<td><input type='text' style='text-align:left' size='30' /></td>
<td><input type='text' style='text-align:left' size='10' /></td>
<td><input type='text' style='text-align:left' size='10' /></td>
<td><input type='button' value='删除' name='del' onclick='delTable(this)'/>
<input type='button' value='保存' name='sav' onclick='savTable(this)'/>
<input type='button' value='修改' name='modi' onclick='modiTable(this)'/>
</td>
</tr>
<tr>
<td colspan=4><button onclick="addCourse()">增加课程</button></td>
</tr>
</table>
</body>
</html>

课程名称下面的第一行，是由HTML定义的，课程名称下面的第二行，是通过javascript产生的。现在在第一行中不能够使用save函数，通过调试器可以看nodeList对象里面并不是预期的td，而是在td前面有text，请问这个text是如何产生的呢？

下图是课程名称下面的第二行的nodeList的值，是预期的值，不明白为什么由html定义的节点前面会多一些text。