<!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>
1 回答
已采纳
qq_一米陽光
TA贡献1条经验 获得超1个赞
<!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>
看一下是否符合你的问题?
添加回答
举报
0/150
提交
取消