dom中表格的修改增加行例

最新推荐文章于 2022-04-19 10:00:06 发布

weixin_30879833

最新推荐文章于 2022-04-19 10:00:06 发布

阅读量220

点赞数

原文链接：http://www.cnblogs.com/qianqian528/p/7680462.html

版权

增加一行

/*
	添加一行
	1、找到父元素（往这里面添加元素）
	2、创建元素 tr td
	创建td元素创建tr元素
	把td元素放到tr元素里面
	3、把tr放到父元素
	*/
	function addcol(){
	// 1、找到父元素（往这里面添加元素）
	var tableObj = document.getElementById("tab");

	// 2、创建元素 tr td创建td元素创建tr元素
	var trObj = document.createElement("tr");


	for(var i = 0; i<4;i++){
	var tdObj = document.createElement("td");
	tdObj.innerHTML = "李四";
	// 把td元素放到tr元素里面
	trObj.appendChild(tdObj);
	}

	// 3、把tr放到父元素
	tableObj.appendChild(trObj);

	var div = document.getElementById("dd");



	}

点击修改输入的内容，并添加加粗，变红按钮。

//window.onload = modTwo;
	/*
	1、点击单元格内容弹窗promrt接收值将接受的值提换单元格内容
	2、点击单元格出现2个按钮加粗字体颜色标红
	1、给点击的元素加属性为了区分加粗的对象
	2、给按钮加点击事件
	3、找到元素，修改样式
	3、创建一行
	*/

	/*
	1、获取所有的td标签
	2、循环td 给每一个替代加上onclick属性
	*/
	//给所有元素加onclick事件
	function modTwo(){

	var tdArr = document.getElementsByTagName("td");

	for(var i = 0; i<tdArr.length;i++){
	tdArr[i].setAttribute("onclick","modone(this)");
	tdArr[i].style.cursor = "pointer";
	}
	}



	/*
	1、给单元格添加点击事件
	2、方法内逻辑，弹窗接收用户的输入。=>保存在一个变量里面
	3、找到要修改内容的单元格，通过操作内容把用户输入的值提换进去
	*/
	var td_obj;
	//td的点击事件
	function modone(obj){
	td_obj = obj;
	//修改值
	obj.innerHTML = prompt("输入要修改的值");
	//按钮显示
	var div = document.getElementById("dd");
	div.style.display = "block";

	//给本标签添加自定义属性
	obj.setAttribute("abc","abc");
	}


	//加粗按钮
	function jc(){
	//找到所有td
	var tdArr = document.getElementsByTagName("td");

	for(var i = 0; i<tdArr.length;i++){
	//找元素
	var a = tdArr[i].getAttribute("abc");
	if(a == "abc"){
	tdArr[i].style.fontWeight = "bold";
	tdArr[i].removeAttribute("abc");
	}
	}
	}
	//字体变红按钮
	function bh(){
	//td_obj是全局变量
	td_obj.style.color = "red";
	//按钮显示
	var div = document.getElementById("dd");
	div.style.display = "none";
	}

<body ><!-- onLoad="modTwo()" -->
	<button onClick="addcol()">添加一行</button>
	<table id="tab" border="1" width="80%" cellpadding="0" cellspacing="0">
	<tr>
	<th>姓名</th>
	<th>性别</th>
	<th>年龄</th>
	<th>班级</th>
	</tr>
	<tr>
	<td>张三</td>
	<td>男</td>
	<td>15</td>
	<td>101</td>
	</tr>


	</table>

	<div id="dd" style="">
	<button onClick="jc()">加粗</button>
	<button onClick="bh()">红色字体</button>
	</div>

	</body>