以table为父节点，创建子节点tr及tr子节点td。如何使鼠标移动，对应那一行背景颜色改变且每一块td颜色不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格添加与鼠标移动</title>
<script type="text/javascript" >
function tab(){
var pli=document.getElementById("first");
var sli=document.createElement("tr");
sli.innerHTML="<td >"+document.getElementById("input1").value+"</td>"
+"<td >"+document.getElementById("input2").value+"</td>"
+"<td ><p onclick='del(this)'>删除</p></td>";
pli.appendChild(sli);
document.getElementById("input1").value="";
document.getElementById("input2").value="";
}
function del(e){
var o=e.parentNode.parentNode ;
o .parentNode .removeChild(o);
}
</script>
</head>
<body>
<p>在下面输入框输入标题</p>
<input id="input1" type="text" value="" >
<p>在下面输入框中输入你想输入的内容</p>
<textarea id="input2" name="" cols="30" rows="30" ></textarea>
<input type="button" value="点我玩啊" onclick="tab()">
<table id="first" width="auto"; height="auto"; border="1"; cellspacing="0";>
<tr>
<th width="200px">标题</th>
<th width="500px">内容</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
where_i_go1回答
-
qq_一米陽光
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表格添加与鼠标移动</title><script type="text/javascript">function tab() {var pli = document.getElementById("first");var sli = document.createElement("tr");sli.innerHTML = "<td>" + document.getElementById("input1").value + "</td>" +"<td >" + document.getElementById("input2").value + "</td>" +"<td ><p onclick='del(this)'>删除</p></td>";pli.appendChild(sli);sli.onmouseenter = showColor;sli.onmouseleave = hideColor;document.getElementById("input1").value = "";document.getElementById("input2").value = "";}function del(e) {var o = e.parentNode.parentNode;o.parentNode.removeChild(o);}var color = ['#4fbbfd', '#c9fd74', '#ff75ca'];function showColor(e) {var childNodes = e.target.childNodes;for (var i = 0; i < childNodes.length; i++) {childNodes[i].style.backgroundColor = color[i]}}function hideColor(e) {var childNodes = e.target.childNodes;for (var i = 0; i < childNodes.length; i++) {childNodes[i].style.backgroundColor = '#fff';}}</script></head><body><p>在下面输入框输入标题</p><input id="input1" type="text" value=""><p>在下面输入框中输入你想输入的内容</p><textarea id="input2" name="" cols="30" rows="30"></textarea><input type="button" value="点我玩啊" onclick="tab()"><table id="first" width="auto" ; height="auto" ; border="1" ; cellspacing="0" ;><tr><th width="200px">标题</th><th width="500px">内容</th><th>操作</th></tr></table></body></html>看一下是否符合你的问题?
随时随地看视频慕课网APP
相关分类
JavaScript