表格对象的获取和更改(原生js)

表格对象的获取

	                        var oT = document.getElementById("tb");
				
				//获取head
				console.log(oT.tHead);
				console.log(typeof oT.tHead);
				
				//获取body
				console.log(oT.tBodies);//[tbody]
				console.log(typeof oT.tBodies);
				
				//获取foot
				console.log(oT.tFoot);
				
				//获取行[tr,tr...]
				console.log(oT.rows);
				//修改第三行的颜色
				oT.rows[2].style.background="blue";
				
				//获取单元格(不能直接通过表格对象获取,通过行获取单元格)
//				console.log(oT.cells);//undefined

				var rows = oT.rows;//[tr,tr...]
				
				var cells=rows[rows.length-1].cells;
				console.log(cells);//[td,td,td,td]
				
				cells[cells.length-1].style.background="red";
				

   表格元素的修改

                                var oT = document.getElementById("tb");
				
				//插入行
				//参数:下标
				var newRow=oT.insertRow(1);
//				console.log(newRow);
//				newRow.innerHTML="new insertRow";
				
				//在行中插入单元格
				var newTd=newRow.insertCell(0);
				newTd.innerHTML = "小明";
				
//				console.log(newTd);

				newRow.insertCell(1).innerHTML="18";
				newRow.insertCell(2).innerHTML="男";
				newRow.insertCell(3).innerHTML="工程师";        

  

posted on 2017-12-30 08:53  水墨江山画  阅读(1773)  评论(0编辑  收藏  举报

导航