微信标志

JAVAscript练习

东山群-电脑网络技术
1、表格应用:隔行变色、移入变色



ID 姓名 年龄
1 张三 33
2 李四 44
3 王五 55
4 赵六 66
5 Danny 33
2、表格应用:添加、删除

姓名: 年龄:

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);