JS DOM之table

最新推荐文章于 2022-11-08 11:40:18 发布

SkullSky

最新推荐文章于 2022-11-08 11:40:18 发布

阅读量732

点赞数 1

分类专栏：前端开发文章标签： JS table 表格元素的访问表格元素的插入表格元素的删除

本文链接：https://blog.csdn.net/SkullSky/article/details/61917692

版权

前端开发专栏收录该内容

14 篇文章 1 订阅

订阅专栏

表格的结构：

tHead : 表格头

tBodies : 表格头

tFoot : 表格尾

rows : 行

cells : 列

示例代码：

<script type="text/javascript">
    window.onload = function(){
        data = [
	 	{id:1,username:'leo',sex:'M'},
	 	{id:2,username:'Joey',sex:'M'},
	 	{id:3,username:'Rachel',sex:'F'},
	 	{id:4,username:'Penny',sex:'F'},
	   ];
        var oTab = document.getElementById('tab1');
	   var oTbody = oTab.tBodies[0];
    }
<body>
	<table id="tab1" width="100%" border="1px">
		<thead>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
		</thead>
		<tbody>
			<!-- <tr>
				<td>1</td>
				<td>Linda</td>
				<td>3</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Joey</td>
				<td>7</td>
				<td>删除</td>
			</tr> -->
		</tbody>
	</table>
</body>

表格的访问操作：oTab.tBodies[0].rows[0].cells[1].innerHTML

alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

表格的插入操作：appendChild()

for( var i=0; i<data.length; i++){

	var oTr = document.createElement('tr');

       if(i%2 == 0){
	 	oTr.style.background = 'white';
	}else{
		oTr.style.background = 'gray';
	}

	var oTd = document.createElement('td');
	oTd.innerHTML = data[i].id;
	oTr.appendChild(oTd);

	var oTd = document.createElement('td');
	oTd.innerHTML = data[i].username;
	oTr.appendChild(oTd);

	var oTd = document.createElement('td');
	oTd.innerHTML = data[i].sex;
	oTr.appendChild(oTd);

	var oTd = document.createElement('td');
	oTd.innerHTML = ' '; //兼容IE浏览器
	oTr.appendChild(oTd);

       oTbody.appendChild(oTr);
}

给表格最后一列添加点击删除操作：removeChild()

oA = document.createElement('a');
oA.innerHTML = 'delete';
oA.href	= 'javascript:;';
oTd.appendChild(oA);

oA.onclick = function(){

	oTbody.removeChild(this.parentNode.parentNode);

	for(var i=0; i<oTbody.rows.length; i++){
		if(i%2 == 0){
			oTbody.rows[i].style.background = 'white';
		}else{
			oTbody.rows[i].style.background = 'gray';
		}
	}
}