JAVAscript练习
![]()
ID | 姓名 | 年龄 |
1 | 张三 | 33 |
2 | 李四 | 44 |
3 | 王五 | 55 |
4 | 赵六 | 66 |
5 | Danny | 33 |
获取单元格:tBodies
tHead
tFoot
rows
cells
一个表格里可以有好多个tBodies、rows、cells,所以他们都是数组。而tHead、tFoot只能有1个,所以不是数组。获取rows的时候必须填写tBodies,不然会把tHead的rows也选进去。
隔行变色:循环所有rows,当第i个rows模上2等于0的时候,执行变色。
移入变色:↑ 当第i个rows进行onmouseover的时候,先不进行改颜色,而是先把它之前的颜色作为变量给存起来,然后再变色。当进行onmouseout的时候,让它的变色变成之前存的变量。
添加表格:当进行添加的时候,首先需要添加一个tr子节点 例如:var oTr=document.createElement('tr')
,然后在oTr里再分别添加4个td子节点 例如:var oTd=document.createElement('td');
,然后分别把每个td放进tr,例如:oTr.appendChild(oTd);
。最后把整个tr进行appendChild放进tbody,例如:oTab2[0].tBodies[0].appendChild(oTr);
第一个td的innerHTML是ID,首先把rows的length作为一个变量存下。然后在innerHTML中赋值这个变量并加1。例如 oTd.innerHTML=id2++;
。ID不重用,一旦出现了一次,就不会出现第二次。
第二个td和第三个td的innerHTML分别是两个输入框的value。
第四个td的innerHTML是删除连接。
删除表格:↑ 首先从oTd里把第0个A标签选出来,加onlick,例如:oTd.getElementsByTagName('a')[0].onclick
,在表格的tbody里removeChild这个A标签的父级(td)的父级(tr),例如:oTab2[0].tBodies[0].removeChild(this.parentNode.parentNode);