猿问

以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_go
浏览 1204回答 1
1回答

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>看一下是否符合你的问题?
1
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答